当前位置: 首页 > Web前端 > HTML

通过一个案例理解position-relative和position-absolute

时间:2023-04-02 19:24:39 HTML

w3school。学完HTML之后,觉得单纯看知识点有点枯燥,容易忘记,于是找了一个具体的网站练习补上。不懂的知识点。position:relative和position:absolute困扰了我将近一个星期。我在网上查到的资料五花八门。确认了对“this”的理解后,又看了一篇资料,发现对“this”的理解是错误的,于是不断修正,并记录下来,最后整理出这个,供参考。如有错误请指正。以下结果是基于firefox38版本测试的。position:relative相对定位1.如何定位?每个元素在页面的正常流动中都会“占据”一个位置,可以理解为默认值,而相对定位就是将元素偏离元素的默认位置,但仍然保持原来的默认位置在正常流量。(定位在父节点的content-box区域,如果父节点有文本,则元素默认位置在文本旁边。)2.内联元素的display属性不会改变。3、不偏离正常流程,只是视觉上的偏移。代码——

position:相对定位测试
显示—添加position:relative;tothestyleofthechildelementoneandthendisplay—addtexttothestyleoftheparentelementcontainanddisplay—display一个从div节点改成span节点,并添加文字“Hello”显示——如果父节点有文字...你好position:相对定位测试
position:absolute绝对定位1.如何定位浮动?设置TRBL相对于设置了position:relative/absolute的父(祖先)节点的padding-box区域定位(忽略文字),如果没有找到满足条件的父(祖先)节点,则相对于浏览器窗口进行定位,如果不设置TRBL,则默认浮动,默认浮动在父节点的content-box区域。2、不管是块级元素还是行内元素,应用position:absolute后,显示都是block:可以设置宽高。如果未设置,宽度默认为auto3。出文档流,容器(父)元素不会出普通流子元素的高度代码——祖先元素父元素子元素显示-添加position:absolute;顶部:0px;左:0px;tothestyleofthesub-elementandthendisplay-addtothestyleofthesub-elementofstyleAfterputposition:absolute;top:0px;,isdisplay——注:应用position:absolute后,设置了top,所以子元素的顶部靠近浏览器窗口的顶部(距离为0px),因为没有设置left,所以子元素的左侧位于content-box区域的左侧默认父元素(没有应用position:absolute之前左边的位置就是那个位置)添加position:absolute;给子元素的样式和显示——案例:理解如果position:absolute元素没有设置TRBL,默认会浮动在父节点的content-box区域。用通俗易懂的一句话来说就是它应该在的地方,而不是它只是一个占位符。先看懂上面示例代码的展示图,以及给自己的元素添加position:absolute后的展示图。添加:显示:内联;到子元素的样式;让我们看看如果子元素是内联元素,它会如何显示。如果同一层级有两个块级元素,看position:absolute是如何分别应用于第一个子元素和第二个子元素的。祖先元素父元素子元素(顶部)子元素(底部)如果position:absolute被应用在同一层级的这两个块级元素上;这两个元素会重叠,子元素(下方)会显示在前面,因为默认代码后面的元素的z-索引比较大。在上面的例子中,如果将第二个子元素替换为内联元素,则子元素(下方)的起始位置没有改变。尝试将display:inline添加到代码中第一个元素的样式中;看看上面的子元素如果是内联元素是怎么显示的。祖先元素父元素子元素(顶部)子元素(底部)现在替换下一个应用position的位置代码:absolute:祖先元素父元素子元素(顶部)子元素(底部)如果第一个子元素是行内元素——祖先元素父元素子元素(顶部)子元素(下)总结:无论是块级元素还是内联元素,都应用position:absolute并且TRBL未设置。默认会浮动在父元素的content-box区域。原来的起始位置也是应用绝对定位后的起始位置,但是如果应用了position:absolute的内联元素左边有一个内联元素,它的起始位置会变得更靠近左边内联元素的边界.综合案例:看position:relative和position:absolute的组合效果使用position:absolute的案例代码——祖先元素parentElementchildelement在上面代码的基础上进行如下定位,看看效果,并理解。案例诊断:添加“position:relative;”到祖先div并添加“position:absolute;top:0px;left:0px;”到父div并添加“position:relative;”给子元素添加“position:absolute;top:0px;left:0px;”使用“position:relative;”到祖先和父div以及带有“position:absolute;top:0px;left:0px;”的子元素添加“位置:绝对;”到祖先div和“position:absolute;top:0px;left:0px;”到父div和“position:absolute;”给子元素position:absolute;top:0px;left:0px;"添加"position:absolute;"到祖先和父div,添加"position:absolute;top:0px;left:0px;"到子元素应用:消除环绕浮动元素影响parent,position:relative(noTRBL)child,float:leftoffirstdiv;position:absoluteoftheseconddiv(noTRBL)因为第二个子div元素在content中默认为Floating-父元素的box区域,它可以消除前一个兄弟div元素的环绕浮动效果。案例代码——位置:absolute消除浮动环绕的影响测试display-添加position:relative到父元素,添加position:absolute到第二个子元素,display-可见,确实是消除了环绕的影响浮动元素,position:absolute优先级高,所以浮动元素被覆盖,不会消失。还看到包含元素的高度不受子元素的影响,因为它们不在文档流中。参考颜色修改记录2016.12.23补充案例理解默认浮动