首页 > 试题广场 >

两个嵌套的div，position都是absolute，子d

[问答题]

两个嵌套的div，position都是absolute，子div设置top属性，那么这个top是相对于父元素的哪个位置定位的。

添加回答
牛客724451412号头像 牛客724451412号

border 内边缘 或 padding 外边缘，与盒子类型无关

发表于 2020-03-08 15:20:52 回复(0)
每天两升水头像 每天两升水
应该是border 内边缘吧
发表于 2021-03-01 09:37:22 回复(0)
拯救世界的光太郎头像 拯救世界的光太郎
CSS 
.outer {
  border: 10px dotted palegoldenrod;
  width: 240px;
  height: 240px;
  background-color: skyblue;
  position: absolute;
  margin: 30px;
  padding: 30px;
}
.inner {
  width: 150px;
  height: 150px;
  background-color: pink;
  position: absolute;
  top: 10px;
  left: 10px;
}


HTML 
<div class="outer">
  <div class="inner">
    top: 10px<br />
    left: 10px;<br />
    margin: 30px<br />
    padding: 30px<br />
    border-width: 10px
  </div>
</div>
改变margin、padding，left、top的相对位置并没有发生任何变化

改变border，发现top、left 相对父容器有移动

很明显，top、left 都是根据border的内侧（或padding的外侧）来进行定位的

编辑于 2023-10-07 09:03:54 回复(1)
牛客597441782号头像 牛客597441782号
的确是以content的外边缘来定位的
编辑于 2020-11-19 14:55:22 回复(0)
阿Sir赛高头像 阿Sir赛高
我做了测试，应该是相对于内容区的上边缘
发表于 2020-09-05 10:46:38 回复(0)
火柴哥头像 火柴哥
<p>margin的外边缘</p>
发表于 2020-06-01 20:24:21 回复(0)
★ACE头像 ★ACE
我测试并不是margin-外边缘啊
发表于 2019-11-29 20:58:13 回复(2)
提交观点

问题信息

上传者：小小
难度：
7条回答 1614浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号