菜鸟学习CSS定位position属性值absolute问题,不懂具体是相对于那里移动
<!DOCTYPE html>
<html>
<head>
<style>
body{background-color:white}
.box{
    background-color:gray;
    width:100px;
    height:100px;
    color:black;
}
#static{
    position:static;
}
#relative{
    position:relative;
    background-color:yellow;
    top:20px;
    left:10px;
    z-index:1;
}
#absolute{
    position:absolute;
    background-color:blue;
    top:40px;
    left:40px;
}
#fixed{
    position:fixed;
    background-color:red;
    top:0;
    left:120px;
    z-index:-1;
}
</style>
</head>
    <body>
        <div class="box" id="static">static</div>
        <!-- 相对于文档中的原始位置移动,这个懂 -->
        <div class="box" id="relative">relative</div>
        <!-- 效果看来是相对于原始框body定位,不知道为什么不相对于relative移动,relative不是最近的父元素,还有原始body框也没有规定position的值啊 搞不懂这几个属性值的计算方法 -->
        <div class="box" id="absolute">absolute</div>
        <div class="box" id="fixed">fixed</div>
    </body>
</html>

图片说明

6个回答

u011233710
早稻城 谢谢
2 年多之前 回复

最近的有relative的父级元素。不行就继续找‘父级元素’的父级元素

u011233710
早稻城 回复qq_28356359: 哦,谢谢
2 年多之前 回复
qq_28356359
qq_28356359 不是。父级元素的意思是 <div><span></span></div>. div标签是span标签的父级元素。你学完dom树就懂了。
2 年多之前 回复
u011233710
早稻城 那么这个例子中的id=relative的元素是最近的父元素吗,从效果上来看似乎不是,对于氟元素怎么看我还是迷迷糊糊,dom树还没有开始学
2 年多之前 回复

static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。

relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 TRBL 定位,并且可以通过z-index进行层次分级。

absolute(绝对定位) 脱离文档流,通过TRBL定位. 使用absolute绝对定位时,冒泡最近的带有absolute/relative的父级,如没有则冒泡至body的TRBL为止,可z-index进行层次分级。

fixed(固定定位) 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

u011233710
早稻城 冒泡最近是说在进行移动基准选择时按照冒泡选择的方式找吗?
2 年多之前 回复

子绝父相,子元素为absolute的话他是由最近那个relative来定往哪里移,怎么算最近呢?就是他的父级,那个最近的有相对定位就以哪个为准。
如果你全部都没有相对定位的话只有绝对定位的话那就是以body为移动的

qq_34672907
前端-珊珊 回复早稻城: 其实一句话就是你子元素为absolute的时候,要看他是根据哪个移动的就看他父级或者他父级的父级是不是有position:relative,如果父级没有relative,父级的父级有relative的话那么有absolute那个就是以父级的父级为移动的基准点,实际应用比较多的就是父级是relative,子级是absolute
2 年多之前 回复
u011233710
早稻城 额,也就是说不仅要是非static的元素就近,并且就近参考的元素必须是需要移动的父元素,满足这两个条件才会按照基准移动,在这个例子里面就近的父元素只有body满足,是这样理解吗
2 年多之前 回复

一般就设置一个relative,然后在这个div里面设置一个absolute,

已解决,另外在这个例子中的absolute是无父级元素的情况,但是这时候移动的参照标准不是body而是html,具体原因我也不知道,是通过测试得知,有哪位大神知道可以告知一下,谢谢

u011233710
早稻城 回复梁珊珊前端之路: 浏览器窗口左上角吗,我找了其他资料以及我自己实验是以html的顶点为基准移动的,如果是浏览器窗口,那此时是不是和fixed一样的移动基准呢?不好意思想要彻底搞清楚
2 年多之前 回复
u011233710
早稻城 回复Rachel_瑞秋: 也就是说,没有按照body来移动是因为即使body是父元素但是没有定义relative所以继续向上找最后找到html,是这个意思吗
2 年多之前 回复
Rachel_ruiqiu
一夕一木 因为absolute是根据父元素来进行定位的, 就是说,当前这个元素的父元素如果有定义relative的话,那就以当前这个父元素来进行定位,如果当前父元素没定义relative的话它就会一直向上查找,直到找到有relative的父元素为止,要么就以最外层的document进行定位了。
2 年多之前 回复
qq_34672907
前端-珊珊 不好意思啊,太久不用了也下意识以为是body,翻了一下之前的笔记。发现不是body而是相对浏览器窗口左上角为定位的
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问