css绝对定位、相对定位、固定定位

最新推荐文章于 2024-07-06 20:55:00 发布

luanmabug

最新推荐文章于 2024-07-06 20:55:00 发布

阅读量1k

点赞数 3

分类专栏： HTML5+CSS 文章标签： css 定位前端

本文链接：https://blog.csdn.net/yangyangdt/article/details/121652085

版权

本文详细介绍了CSS中的三种定位方式：相对定位、绝对定位和固定定位。相对定位不脱离文档流，可通过top、bottom、left、right属性调整位置。绝对定位脱离文档流，定位参考点可为祖先元素或浏览器窗口。固定定位始终相对于浏览器窗口定位，不受滚动影响。此外，还讨论了z-index属性在定位元素层级控制中的作用。

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

css 定位

一、css的三种定位属性

1. 相对定位 position: relative;

元素相对于自己原来的位置，进行位移。

特性：

1,不脱离文档流;其他元素不受影响
2,相对于自己的文档流上下左右定位
3,层级高于其他元素
4,使用属性:top bottom left right。

属性值

指的是向哪个方向留出多少距离，例如left:50px;在左边留出50px,元素右移。和margin差不多意思。

我们给出两个div，div1加上相对定位看效果。

<style type="text/css">	
		body{
     
			margin: 0px;
		}
		/*相对定位：相对于自己原来的位置*/
		.div1{
     
			/*position: relative;
			left: 50px;
			top: 50px;*/
			width: 200px;
			height: 200px;
			border: 1px solid red;
			/*background-color: red;*/
		}

		.div2{
     
			width: 200px;
			height: 200px;
			border: 1px solid red;
			/*background-color: yellow;*/
		}
	</style>
	<div>
		<div class="div1">div1</div>
		<div class="div2"><