CSS 布局模型的position属性

最新推荐文章于 2024-07-27 17:24:14 发布

Dreamy_wit

最新推荐文章于 2024-07-27 17:24:14 发布

阅读量346

点赞数 1

本文链接：https://blog.youkuaiyun.com/Dreamy_wit/article/details/73499742

版权

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>

效果如图：

（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>

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

（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元素。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化。

以上为听课整理的笔记。完