CSS易混淆知识点总结与分享－定位与布局_html/css_WEB-ITnose

CSS定位有四种模式：static、relative、absolute、fixed，其它static是默认值，下面分别讲解下各自的特点；

static：静态定位，处于动态布局流中，按照页面中的各元素先后顺序、父子关系自动排列与布局，每个静态定位元素均占用动态布局的一块空间；

relative：相对定位，处于动态布局流中，如果设置了偏移量（LEFT或TOP的值），则会有相应的位置调整，位置调整的标准是基于上一个处于动态布局流中的元素（即：设为static及relative元素）；

absolute：绝对定位，不在动态布局流中，动态布局流中会忽略该元素的存在（即不计算该类元素的占用空间，且默认处于未设置Z-INDEX的普通元素的上层），如果设置了偏移量（LEFT或TOP的值），则会有相应的位置调整，位置调整的标准是基于非静态定位的父元素（或者说是非静态定位包裹的元素），如果没有符合条件的父元素，则以BODY为标准；如果没有设置偏移量，则直接将元素当前的位置做位默认的偏移量，另外，绝对定位具有包裹性，即块级元素被绝对定位后，除非显示式设置元素的宽度与高度，否则元素的默认宽度与高度是以元素的内容来自动适应的；

fixed：固定定位，不在动态布局流中，动态布局流中会忽略该元素的存在（即不计算该类元素的占用空间，且默认处于未设置Z-INDEX的普通元素的上层），如果设置了偏移量（LEFT或TOP的值），则会有相应的位置调整，位置调整的标准是基于浏览器窗口的（可以理解为BODY），如果没有设置偏移量，则直接将元素当前的位置做位默认的偏移量，另外，固定定位具有包裹性，即块级元素被固定定位后，除非显示式设置元素的宽度与高度，否则元素的默认宽度与高度是以元素的内容来自动适应的；还有若设置或默认的的位偏移量大于浏览器窗口范围则不会显示；

以下是上面四种定位方法的演示代码：

         CSS Study              html, body {            margin:0px;            padding:0px;            height:100%;        }        #div0{            position:static;            background-color:gray;            height:200px;        }        #div1 {            position:relative;            background-color:green;            height:200px;        }        #div2 {            position: absolute;            height: 50px;            background-color: red;            top: 20px;            left: 50px;            z-index: 9999;        }        #div3{            position:fixed;            background-color:yellow;        }                  window.onload = function () {            alertpostion("div2");            alertpostion("div3");        }        function alertpostion(divid)        {            var odiv = document.getElementById(divid);            var top = odiv.offsetTop;            var left = odiv.offsetLeft;            alert("top:" + top +",left:" + left);        }                   div0 content  position:static;

      
查看更多关于CSS易混淆知识点总结与分享－定位与布局_html/css_WEB-ITnose的详细内容...
        
          声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did108812

更新时间：2022-11-17 阅读：33次