css - 父元素margin为负值 但包含子元素却没有跟随向上移动

问题描述

问 题

html结构

<div>

ul>li*8>a>img

ul.dot>li*8

</div>

css代码(黑框为ul 黑点为li)

.slider .dot{
  position:relative;z-index:10;
  border:3px solid black;
  height:10px;
  width:266px;
  padding:0 10px;
  margin:-30px auto 0;
}
.slider .dot li{
  float:left;
  margin:0 10px;
  width:10px;height:10px;
  border:1px solid #fff;
  border-radius:50%;
  background-color:#333;
}

解决方案

以下是我个人的一点看法，有大牛的话希望提出我的问题，也不要一言不合就开喷。。。。。。
我认为应该是

这边的问题，因为相对定位这个属性是占据文档流的，它会相对于本身在文档流中的位置进行定位，
虽然relative占据了文档流，但是这并不意味着你可以通过margin属性来改变它在文档流中的位置
毕竟定位属性改变位置的更本方法是用left、top、bottom、right属性
这时如果改变容器的margin值，浏览器认为你的元素依然占据本身的位置
但是你的子元素又是在容器中浮动的，因此，依然在你margin前的位置
一般来说这里采用绝对定位absolute属性比较好
当然啦父元素要添加position属性的这个应该没有意见上的冲突
如果实在想用relative，可以尝试改成这样？

题外话：用margin横向居中不会出问题，因为容器占据了一行

这篇关于css - 父元素margin为负值 但包含子元素却没有跟随向上移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！