CSS 布局模型的position属性

position属性的3种可能情况分别是absolute、relative&fixed

（1）absolute 绝对定位

div{
    width:200px;
    height:200px;
border:2px red solid;
position:absolute;
top:20px;
right:100px;   
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

效果如图：

CSS 布局模型的position属性

（2）relative 相对定位

<style type="text/css">
#div1{
    width:200px;
    height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;


}

</style>
</head>
<body>
<div id="div1"></div>偏移前的位置保留不动<span>覆盖不了移动之前的位置，后面的内容依然紧跟在移动前的占位上</span>
</body>
</html>

效果如图：偏移前的空位仍然保留在文档流中，

CSS 布局模型的position属性

（3）fixed 固定定位

<style type="text/css">
#div1{
    width:200px;
    height:200px;
border:2px red solid;
position:fixed;
bottom:0;
right:0;


}

</style>
</head>
<body>
<div id="div1"></div>
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
        <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
</body>
</html>

效果如图：可以实现在浏览器屏幕右下角定位div1元素。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化。

CSS 布局模型的position属性
以上为听课整理的笔记。完

秒客网

CSS 布局模型的position属性

相关文章