CSS的三种定位

来源：互联网发布：纽约卡车知乎编辑：程序博客网时间：2024/06/03 20:44

CSS的三种定位

CSS的三种引用方式：相对定位（relative）、绝对定位（absolute）、固定定位（fixed）。

相对定位（relative）

　被看作普通流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        .p1{            background-color: red;        }        .p2{            position: relative;            left: 20px;        }        .p3{            position: relative;            right: 20px;        }    </style></head> <body>    <div class="p1">我是相对定位</div>    <div class="p2">我是相对定位</div>    <div class="p3">我是相对定位</div></body></html>

绝对定位

对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么它的位置就相对于最初的包含块（如body）。绝对定位的框可以从它的包含块向上、右、下、左移动。
　　绝对定位的框脱离普通流，所以它可以覆盖页面上的其他元素，可以通过设置Ｚ-Iindex属性来控制这些框的堆放次序。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        #p1 {            width: 200px;            height: 200px;            background: yellow;        }        #p2 {            width: 50%;            height: 50%;            background: red;            top: 100px;            left: 100px;            position: absolute;        }    </style></head> <body>    <div id="p1">        <div id="p2"></div>    </div></body></html>

固定定位

相对于浏览器窗口，其余的特点类似于绝对定位。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        #p1 {            top: 100px;            left: 100px;            position: fixed;            width: 200px;            height: 200px;            background: yellow;        }    </style></head> <body>    <div id="p1"></div></body></html>

阅读全文

0 0