CSS四种定位方式的详解

最新推荐文章于 2022-02-05 09:24:13 发布

专注Python二十年

最新推荐文章于 2022-02-05 09:24:13 发布

阅读量4.8k

点赞数 5

文章标签： css css3 html 前端大前端

本文链接：https://blog.csdn.net/pig_html/article/details/112391083

版权

本文详细介绍了CSS布局的四种定位方式：static、relative、absolute和fixed。static是默认定位，relative相对定位会脱离正常流但保留原有位置，absolute绝对定位相对于最近的非static祖先元素定位，而fixed固定定位则相对于浏览器窗口定位。同时，文章还提到了z-index在定位中的作用，用于控制元素的层叠顺序。

摘要由CSDN通过智能技术生成

CSS布局的四种定位方式

1、static（静态定位）：

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。参考上篇随笔。

2、relative（相对定位）：

定位为relative的元素脱离正常的文档流，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有移动。

通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。

.static1{ 
height:80px; 
background-color: red;
        } 
.relative{ 
height:80px; 
position:relative; 
top:40px; 
left:40px; 
background-color: black;
        } 
.static2{ 
height:80px; 
background-color: blue;
        }

    </style>
</head>
<body>
    <div class="static1"></div>
    <div class="relative"></div>
    <div class="static2"></div>
</body>