Web前端开发——CSS布局与定位之层定位

最新推荐文章于 2022-03-14 15:39:17 发布

OSurer

最新推荐文章于 2022-03-14 15:39:17 发布

阅读量1.3k

点赞数 3

分类专栏： Web前端开发文章标签： CSS布局与定位相对定位绝对定位固定定位层定位

本文链接： https://blog.csdn.net/wq_ocean_/article/details/104187861

版权

Web前端开发专栏收录该内容

26 篇文章 4 订阅

订阅专栏

1. 内容

2. 层定位概述

3. 固定定位position:fix

3.1 案例1

3.2 案例2

4.相对定位position:relative

4.1 保留文档流的原位置

4.2 相对于直接父元素

5. 绝对定位position:absolute

5.1 不保留文档流的原位置

5.2 相对static定位以外的第一个父元素

5.2.1 一般情况

5.2.2 极端情况

6. relative和absolute的区别

7.relative+absolute混合使用

1. 内容

2. 层定位概述

我们希望网页的元素可以层叠在另外的一个元素上面，出现这种叠加或者覆盖的效果，这个时候我们就用到层定位，层定位像图像软件中的图层一样可以对每个layer能够精确定位操作。

层定位主要使用positon属性来设定，当前这一层究竟可以相对于哪一层来进行定位，不同的属性值它的参照物是不同的，有了参照物之后就使用这几个属性来进行位置的设定；
z-index设置前后层的层叠关系，取值大的这一层会覆盖遮挡取值小的这一层，如果我们希望把当前的这个图片进行背景的设定，我们可以把它的z-index属性的取值设置的非常小，比如设置成一个负数（-999），如果设置的值很大，那么它就变成了顶层，都是按照它的取值大小顺序来逐层排列的；

我们把某个网页元素称为一层，那外面的元素称为父层，里面嵌入的元素称为子层

3. 固定定位position:fix

3.1 案例1

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#fix-left{
	    width:200px;
	    height:200px;
		border:2px red solid;	
	    position:fixed;
	    left:100px;
	    top:50px;    
	}
	</style>
</head>
<body>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, dolorum sequi odio minus voluptatem tempora quos pariatur est odit <div id="fix-left"></div>ullam quisquam molestiae minima placeat asperiores voluptatibus adipisci harum. Similique, a?</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, earum, tempora, minus, facere quia accusantium ut similique labore odio minima recusandae voluptate tempore doloremque quos incidunt pariatur iusto sunt quam.</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, amet, voluptate doloremque sed odio voluptas hic beatae totam impedit reprehenderit incidunt facilis fuga doloribus nam ea ab harum architecto quisquam.</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, eius, dolore, qui possimus eligendi aperiam ad neque odit animi doloremque nisi sequi soluta quos labore magni ab corporis ea assumenda.</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, dignissimos, corporis, iure dolor deleniti praesentium quaerat nulla eum temporibus beatae unde optio esse! Ut, iste dolor beatae perspiciatis voluptas corporis?</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, in, dolor ab quae saepe aperiam dolores doloribus nulla nesciunt voluptas ipsum ipsa eaque animi maxime placeat sapiente velit dicta reprehenderit.</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, in, dolor ab quae saepe aperiam dolores doloribus nulla nesciunt voluptas ipsum ipsa eaque animi maxime placeat sapiente velit dicta reprehenderit.</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, in, dolor ab quae saepe aperiam dolores doloribus nulla nesciunt voluptas ipsum ipsa eaque animi maxime placeat sapiente velit dicta reprehenderit.</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, in, dolor ab quae saepe aperiam dolores doloribus nulla nesciunt voluptas ipsum ipsa eaque animi maxime placeat sapiente velit dicta reprehenderit.</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, in, dolor ab quae saepe aperiam dolores doloribus nulla nesciunt voluptas ipsum ipsa eaque animi maxime placeat sapiente velit dicta reprehenderit.</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, in, dolor ab quae saepe aperiam dolores doloribus nulla nesciunt voluptas ipsum ipsa eaque animi maxime placeat sapiente velit dicta reprehenderit.</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, in, dolor ab quae saepe aperiam dolores doloribus nulla nesciunt voluptas ipsum ipsa eaque animi maxime placeat sapiente velit dicta reprehenderit.</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, in, dolor ab quae saepe aperiam dolores doloribus nulla nesciunt voluptas ipsum ipsa eaque animi maxime placeat sapiente velit dicta reprehenderit.</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, in, dolor ab quae saepe aperiam dolores doloribus nulla nesciunt voluptas ipsum ipsa eaque animi maxime placeat sapiente velit dicta reprehenderit.</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, in, dolor ab quae saepe aperiam dolores doloribus nulla nesciunt voluptas ipsum ipsa eaque animi maxime placeat sapiente velit dicta reprehenderit.</div>
</body>
</html>

固定住一个div后，这个盒子不会随浏览器窗口的滚动条滚动而变化，它总在视线里相同的位置；

值得注意的是无论是哪一种定位方式，参照物的原点始终是左上角，水平轴向右为正，垂直轴向下为正

3.2 案例2

我们经常看到中间是网页的主体内容，而两侧有两个广告的广告栏，这个广告栏无论鼠标怎样拖动，浏览器窗回里面的这部分内容，会随着滚动条的滚动内容发生变化，但是这个广告始终悬停在这个位置，让用户总是能看到，这个时候我们就可以采用postton属性，取值为fixed这样的固定定位方式。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	#container{
		width: 600px;
		height: 1500px;
		background-color: #ccc;
		margin: 0 auto;
	}
    #fix-left{
	    left:100px;	       
	}
	#fix-right{
	    right:100px; 
	}
	.fix{
	    width:100px;
	    height:100px;
	    border:2px red solid;	
	    position:fixed;
	    top:50px; 
	}
	.fix img{
		width: 100px;
		height: 100px;
	}
	</style>
</head>
<body>
	<div id="container">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, delectus pariatur ipsa minima dolores facere quas neque sequi. Dolor, suscipit quisquam incidunt quas perferendis magnam quod temporibus aliquid saepe officia.</p>
		<div id="fix-left" class="fix"><img src="1.jpg" alt=""></div>
		<div id="fix-right" class="fix"><img src="2.jpg" alt=""></div></div>
    </div>
</body>
</html>

两个广告栏具有相同的样式，于是用class=fix设计公共样式，其中包括大小、边界、定位方式和距离上部的位置；
两个广告栏水平方向各不相同，于是用ID样式各自设置；

4.相对定位position:relative

4.1 保留文档流的原位置

定位为relative的元素脱离正常的文档流中，但其在文档流中的原位置依然存在

设置相对定位后，他会脱离文档流定位，位置由top和left来决定，向右下方倾斜，但是由于它的原来在文档流当中的位置依然会被保留，所以位于它下面的另外一个statc类型的元素没有去占据它的位置，这个是租对定位它的特点

4.2 相对于直接父元素

relative定位的层总是相对于其直接父元素，无论其父元素是什么定位方式。

如图，定位为relative的元素是相对与图中箭头所指的深蓝色父元素

5. 绝对定位position:absolute

5.1 不保留文档流的原位置

定位为absolute的层脱离正常文本流，与relative的区别在于其在正常流中的原位置不再存在

可以看到绝对定位部分首先它会脱离文档流，它的位置上和左分别是20个像素，这个时候由于它原来的位置会被丢失，所以它下面的这一个静态的定位，也就是默认的文档流定位的元素会向上移动，占据原有这个元素它的位置

5.2 相对static定位以外的第一个父元素

5.2.1 一般情况

对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。

定位为absolute的元素的直接父元素也就是粉色箭头所指的元素是static，因此其直接父层不是其参照物，继续向上寻找，红色箭头所指的absolute/relative的元素才为其参照物。

5.2.2 极端情况

对于absolute定位的层,如果其父层中都未定义absolute或relative，则其将相对body进行定位

如图，absolute的元素将相对于body进行定位

6. relative和absolute的区别

7.relative+absolute混合使用

相对定位和绝对定位通常我们会结合在一起来使用，我们通常会将外层的父元素box1设置为相对定位，然后将它内层的子元素box2设置为绝对定位，这样做的好处是我们当父元素box1移动的时候，子元素是相对于父元素的位置进行定位的，所以它们两个可以一起被移动，当然除了定位子元素绝对定位之外，我们还需要定位子元素的属性确定它在父元素当中的具体位置。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	div{
    	border:2px red solid;
    	color: #fff;
		
	}
	#box1{
	    width:170px;
	    height:190px;
	    position:relative;  
	}
	#box2{
	    width:99%;
	 	position:absolute;	
		bottom:0;    
	}
	</style>
</head>
<body>

<div id="box1">
    <img src="2.jpg">
    <div id="box2">一起享受咖啡带来的温暖吧</div>
</div>

</body>
</html>