网页制作 
首页 > 网页制作 > 浏览文章

css子元素相对父元素进行定位的实现

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

解决方案

在父元素中加入position:relative;
子元素中加入position:absolute; right:20px;

代码

html结构

<div id="div1">
	<div id="div2"></div>
</div>

css

#div1{
	width:500px;height:500px;
	background-color:darkgray;
	position:relative;
}
#div2{
	width:30px;height:30px;
	background-color:red;
	position:absolute;
	right:20px;
}

效果

css子元素相对父元素进行定位的实现

原理

浏览器渲染html,是有文档流的说法的,块级元素换行渲染,行内元素行内渲染,在这里,两个div都是块级元素,一个父,一个子,正常来说的渲染结果是父元素在浏览器左上角,子元素在父元素的左上角。

如果我们要对子元素相对父元素进行定位,就要用对position属性。
position属性值

属性值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 relative 生成相对定位的元素,相对于其正常位置进行定位。

我们知道,要使用相对于父元素的定位,肯定要使用absolute,为什么直接使用absolute不起作用?因为使用absolute相对于父元素定位,对父元素有一个要求,就是父元素的position不能是static,如果父元素的position是static那么就继续向上查找元素,知道找不position不为static的元素,对这个元素进行相对定位,所以,需要将父元素的position设置为relative,这样做是没有影响的,因为,relative只是相对于正常位置进行定位,正常位置就是所谓的文档流默认的输出位置,如果我们设置了position为relative而不设置偏移量x,y,那就相当于父元素的位置是没有变动的。

上一篇:纯CSS让子元素突破父元素的宽度限制
下一篇:CSS子元素跟父元素的高度一致的实现方法
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap