day6-布局与定位：层定位

最新推荐文章于 2021-07-18 15:30:28 发布

新人小程序猿

最新推荐文章于 2021-07-18 15:30:28 发布

阅读量236

点赞数 1

分类专栏：前端学习文章标签： css html 定位

本文链接：https://blog.csdn.net/weixin_43697280/article/details/109493929

版权

层定位用到属性    position：
该属性的取值有四个：
static      默认的取值，相当于没有定位，出现在默认的流中
fixed       固定定位，以相对于浏览器窗口进行定位。元素的位置通过 "left",
            "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进
            行层次分级
absolute    绝对定位，生成绝对定位的元素，相对于 static 定位以外的第一个
            父元素进行定位。元素的位置通过 "left", "top", "right" 以及
             "bottom" 属性进行规定。可通过z-index进行层次分级
relative：  相对定位，生成相对定位的元素，通过top,bottom,left,right的设
            置相对于其正常（原先本身）位置进行定位。可通过z-index进行层
            次分级。

其中relative（相对定位）和absolute（绝对定位）相对来说难理解一点点

relative：
设置了相对定位的元素会脱离正常文档流，但其原来的位置是依然存在的
它是默认参照父级的原始点作为原始点（也就是类似于第四象限的那样，
以左上角作为原点），无父级则以文档流的顺序再往上一个元素的底部为
原始点，配合TRBL（top、right、bottom、left）进行定位，当父级内有
padding等css属性时，当前级的原始点则参照父级内容区的原始点进行定位
Top的值表示对象相对原位置向下偏移的距离，
bottom的值表示对象相对原位置向上偏移的距离，两者同时存在时，只
      有Top起作用。
left的值表示对象相对原位置向右偏移的距离，
right的值表示对象相对原位置向左偏移的距离，两者同时存在时，只有
      left起作用。

absolute：设置为absolute的层是脱离了文档流的，也就是说他移动后的位
	置是可以被其他标签填补的。以父元素作为参照物，但这个父元素也得是有
	relative或者absolute的position取值才算，不然就继续往上符合条件的父
	元素

优先度：fixed>absolute>relative
设置属性z-index：的值可以打破上面的优先级排序

当想实现子元素跟随父元素进行移动而移动时，子元素设置position:absolute，父元素设置position:relative这样就可以实现上述功能了

<!DOCTYPE html>
<html>
<head>
	<title></title>



	<style type="text/css">
		div{
    
			border: 1px solid red;
			cplor:#fff;
		}
		#box1{
    
			height: 100px;
			width: 100px;
			position: relative;
		}
		#box2{
    
			height: 50px;
			width: 50px;
			position: absolute;
			bottom: 0;
			
		}




	</style>
</head>
<body>

	<div id="box1">
		<!-- <img src="京剧4.jpg"> -->
		<div id="box2">
			
很高兴认识你

		</

最低0.47元/天解锁文章

新人小程序猿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
day6-布局与定位：层定位

层定位用到属性 position：该属性的取值有四个：static 默认的取值，相当于没有定位，出现在默认的流中fixed 固定定位，以相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级absolute 绝对定位，生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
复制链接

扫一扫