position属性问题_html/css_WEB-ITnose
程序员文章站
2022-05-22 18:29:15
...
.right{ width:30%; float:right; position:relative; }.shadow{ width: 100px; height: 100px; background-color: rgb(237, 237, 237); position: absolute; left: 0px; top: 2px; }
重点是,为什么right的position属性为relative时,shadow是在right内的,当right的position属性为默认static时,shadow就到页面左上角去了?
回复讨论(解决方案)
绝对定位的元素的位置是相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(也就是body)。
绝对定位的元素的位置是相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(也就是body)。
那意思static算未定位,relative算已定位吗?
?
.right
float:right;
这个你写的呀
绝对定位的元素的位置是相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(也就是body)。
++++
static就是position的默认值,也就是未定位。
absolute 相对BODY定位
其他相对父容器定位吧。
relative生成相对定位的元素,相对于其正常位置进行定位。这时候shadow会相对于right进行left 0像素的偏移,top 2像素的偏移。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
这种情况十有八九是因为你的html没有遵循w3c标准
推荐阅读
-
工作中使用jasmine遇到的一个html element和Component绑定属性失去同步的问题
-
HTML5自定义属性的问题分析
-
[转]CSS浏览器兼容问题总结_html/css_WEB-ITnose
-
TextView采用setText赋值之后不能立即显示在页面上的问题解决_html/css_WEB-ITnose
-
p标签问题。求帮助_html/css_WEB-ITnose
-
CSS Position学习_html/css_WEB-ITnose
-
终于成为博客员的一员了,这是我的第一篇博文,写一个关于ul li内容宽度的问题和解决方案_html/css_WEB-ITnose
-
菜鸟:关于24小时循环倒计时的问题_html/css_WEB-ITnose
-
页面引用小图片问题_html/css_WEB-ITnose
-
获取网页源码问题_html/css_WEB-ITnose