怎么判断子元素距离父元素顶部位置_css子元素如何相对父元素定位？

在css中，可以使用position属性，通过给父元素设置相对定位“position:relative;”样式，给子元素设置绝对定位“position:absolute;”样式来实现子元素相对父级元素定位。

本教程操作环境：windows7系统、css2版，该方法适用于所有品牌电脑。

相关推荐：《编程视频课程》

css中子元素相对父元素定位的实现方法

父级元素样式设置：position:relative;

子元素样式：position:absolute;

示例代码：

html结构

css#div1{

width:500px;height:500px;

background-color:darkgray;

position:relative;

}

#div2{

width:30px;height:30px;

background-color:red;

position:absolute;

right:20px;

}

效果

原理

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

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

position属性值属性值描述absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

relative生成相对定位的元素，相对于其正常位置进行定位。

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

想要查阅更多相关文章，请访问PHP中文网！！

怎么判断子元素距离父元素顶部位置_css子元素如何相对父元素定位？相关推荐

js，jquery获取页面元素距离浏览器工作区顶端的距离
先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript) ...
P41-前端基础-clear解决受浮动元素的影响而改变位置
P41-前端基础-clear解决浮动元素的影响而改变位置 1.概述问题描述使用块元素设计页面布局,当A块元素设置浮动后,离开了文档流.相邻的块元素B受浮动的影响会改变原有的位置,移动到A元素位置. ...
ehd边缘直方图描述子 matlab,第 2 章　局部图像描述子
第 2 章局部图像描述子本章旨在寻找图像间的对应点和对应区域.本章将介绍用于图像匹配的两种局部描述子算法.本书的很多内容中都会用到这些局部特征,它们在很多应用中都有重要作用,比如创建全景图.增强现 ...
OpenCV检测子像素中的角点位置
OpenCV检测子像素中的角点位置检测子像素中的角点位置目标代码结果检测子像素中的角点位置目标在本教程中,您将学习如何: 使用OpenCV函数cv :: cornerSubPix查找更精 ...
[译] 关于CSS中的float和position (父容器div内的子元素div为float时，父元素无法撑开（或高度自适应）的解决方式)
测试案例:http://blog.csdn.net/goodshot/article/details/44408245 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求, ...
html 相对于父标签位置,css子元素如何相对父元素定位？
在css中,可以使用position属性,通过给父元素设置相对定位"position:relative;"样式,给子元素设置绝对定位"position:absolute; ...
【转】解决父容器高度不跟随子元素扩大的问题
原文链接:http://blog.sina.com.cn/s/blog_674379bf0100lyy3.html 方法一: 编写CSS使用DIV的FLOAT属性使元素浮动,在父容器中添加zoom:1 ...
vue动态获取元素距离页面顶部的高度_VUE如何实时监听元素距离顶部高度
VUE如何实时监听元素距离顶部高度发布时间:2020-07-30 09:09:43 来源:亿速云阅读:150 作者:小猪这篇文章主要讲解了VUE如何实时监听元素距离顶部高度,内容清晰明了,对此有 ...
vue获取元素距离页面顶部的距离_VUE实时监听元素距离顶部高度的操作
效果图如下所示 .html 今日热门今日热销 .js mounted(){ window.addEventListener('scroll',this.handleScrollx,true) }, ...

怎么判断子元素距离父元素顶部位置_css子元素如何相对父元素定位？

怎么判断子元素距离父元素顶部位置_css子元素如何相对父元素定位？相关推荐

最新文章

热门文章