html绝对定位最小化超标,html – 静态定位元素影响后续兄弟元素的绝对位置

我知道任何具有position：absolute的元素都将相对于最近的祖先定位,其位置属性如绝对或相对.这在例如

here的各种答案中都有提到.另外在w3schools网站上

here …

An element with position: absolute; is positioned relative to the

nearest positioned ancestor (instead of positioned relative to the

viewport, like fixed).

但是,插入静态元素似乎会破坏此规则并移动绝对元素.我想知道为什么会这样.请参阅下面的代码段.

如果静态元素被追加到绝对值,则后续元素将按预期显示(根据最近的位置祖先规则).

div.relative {

position: relative;

width: 440px;

height: 600px;

border: 3px solid #73AD21;

}

div.static {

position: static;

width: 200px;

height: 100px;

border: 3px solid #73ADff;

}

div.absolute {

position: absolute;

width: 200px;

height: 100px;

border: 3px solid #73AD21;

}

div.absolute2 {

left:210px;

position: absolute;

width: 200px;

height: 100px;

border: 3px solid #ffAD21;

}

This div element has position: relative;

This div element has position: static

This div element has position: absolute, but is positioned relative to the preceding static element, not the first positional ancestor.;

This div element also has position: absolute;

html绝对定位最小化超标,html – 静态定位元素影响后续兄弟元素的绝对位置相关推荐

[html] 如果列表元素li的兄弟元素为div，会产生什么情况？
[html] 如果列表元素li的兄弟元素为div,会产生什么情况? 单纯的对html来说主要是破坏了语义结构吧, css方面来说不好统一控制样式,div默认也没有list-style 个人简介我是歌 ...
通过CSS3的hover一个元素使其兄弟元素也相应改变某种属性
在最近的一个Bootstrap项目中用到了CSS3里面的hover,实现鼠标进入一个字体图标时,该字体图标向上移动一定距离,颜色也变为红色,同时其兄弟元素只改变颜色而不与其上移. 过程如下图鼠标未进 ...
JS追加元素和获取兄弟元素、父元素的方法
JS追加元素的几种方法 append(),在父级最后追加一个子元素 appendTo(),将子元素追加到父级的最后 prepend(),在父级最前面追加一个子元素 prependTo(),将子元素追加 ...
如何最小化云API升级造成的中断？
云提供商升级API时,开发者必须升级并重新测试自己的软件,如何为这个过程做好准备并且最小化影响? 云提供商为了扩展和改善服务进行了服务升级,通常需要进行API升级.但是伴随着利好的部分,这些应用编程接 ...
添加元素的注意问题复习介绍元素的创建元素添加的方法元素移除的方法
添加元素的注意问题 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
jQuery中兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
Thinking -- CSS从根解决选择前一个兄弟元素
Thinking系列,旨在利用10分钟的时间传达一种可落地的编程思想. 开发中遇到这样一个诉求:特定class的元素单独占一行,现需要针对其前一个兄弟元素增加相应标识,以使其占据所在行的剩余所有空间. ...
jquery获取元素（父级的兄弟元素的子元素）
一.获取父级元素使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素使用jquery获取同级元素:siblings() 例如:$(t ...
jquery 遍历父元素、子元素、兄弟元素
寻找父元素 1. parent()方法,只返回被选元素的直接父元素,只遍历到上一级的父元素,返回的是一个元素. 2. parents()方法,返回被选元素的所有父元素,一直向上遍历,直到文档的根元素为 ...

html绝对定位最小化超标,html – 静态定位元素影响后续兄弟元素的绝对位置

html绝对定位最小化超标,html – 静态定位元素影响后续兄弟元素的绝对位置相关推荐

最新文章

热门文章