绝对定位元素的布局和元素的层级

目录

         一、绝对定位元素的布局

二、元素的层级

---

一、绝对定位元素的布局

        水平布局：

         left + margin-left + border-left + padding-left + width + padding-right + border-                                    right + margin-right + right = 包含块内容区的宽度

               当我们开启了绝对定位后：

                    水平方向的布局等式就需要添加left和right两个值

                    此时规则和之前一样只是多添加了两个值：

                     当发生过度约束时：

                      如果九个值中没有auto则自动调整right值以使等式满足

                      如果有auto则自动调整auto的值以使等式满足                    

                        可以设置auto的值：

                          margin width left right

                      因为left和right的默认值是auto，所以如果不设置left和right

                         则等式不满足时，会自动调整这两个值

            垂直方向布局的等式也必须满足：

              top + margin-top + border-top + padding-top + height + padding-bottom + border-                              bottom + margin-bottom +bottom =包含块的高度

二、元素的层级

        对于开启了定位的元素，可以通过z-index属性来指定层级

              z-index需要一个整数作为参数，值越大元素的层级越高

                    元素的层级越高越优先显示

                  如果元素的层级一样，则优先选择显示靠下的元素

                    祖先元素的层级再高也不会盖住后代元素