Question

我是CSS新手。我对位置感到困惑。有一个简单的例子。

$(document).ready(function() {
	$('.content').scroll(function() {
  	if ($(this).scrollTop() > 0) {
    	if (!$('.topline').hasClass('long'))
      	$('.topline').addClass('long')
    } else {
    	if ($('.topline').hasClass('long'))
      	$('.topline').removeClass('long')
    }
  });
});

.header {
  position: relative;
  height: 65px;
  background: brown;
  overflow-y: hidden;
  overflow-x: hidden;
}
  
.topline {
  position: absolute;
  top: 0px;
  width: 100vw;
  height: 5px;
  background: blue;
  transition: 0.2s;
}

.topline.long {
  height: 65px;
  transition: 0.2s;
}

.topbar {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 10px;
}

.topbar div {
  flex: 1;
  color: white;
}

.content {
  height: calc(100vh - 65px);
  overflow-y: auto;
  overflow-x: hidden;
}

.content-parta {
  height: 800px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class='header'>
 <div class='topline'>
  
  </div>
  <div class='topbar'>
    <div>test1</div>
    <div>test2</div>
    <div>test3</div>
    <div>test4</div>
  </div>
 
</div>
<div class='content'>
  <div class='content-parta'>
    
  </div>
</div>

滚动事件触发时，topline类高于topbar类。我不知道为什么topbar类的儿子要比topline类高。

当我将topline类移到topbar类之后时，它是最高的。

我想知道为什么。

Answer 1

HTML认为它已经落后了。将其视为3D环境。您可以使用z-index。这样，您可以控制外观的工作方式。您可以检出this。

Answer 2

如果您参考the specification和绘画顺序：

所有已定位，不透明或变换后代，按树顺序属于以下类别：

所有具有'z-index：auto'或'z-index：0'的后代，以树顺序排列。   对于具有“ z-index：auto”的元素，将其视为已创建新的堆栈上下文，但是任何定位的后代和实际创建新堆栈上下文的后代均应视为父级堆栈上下文的一部分，而不是此新堆栈上下文的一部分。。

两个元素的位置都具有相同的属性（z-index:auto是重要的属性），因此树顺序将决定哪一个位于顶部。在您的实际代码中，topbar位于顶部。如果切换HTML顺序，则将其显示在底部：

$(document).ready(function() {
	$('.content').scroll(function() {
  	if ($(this).scrollTop() > 0) {
    	if (!$('.topline').hasClass('long'))
      	$('.topline').addClass('long')
    } else {
    	if ($('.topline').hasClass('long'))
      	$('.topline').removeClass('long')
    }
  });
});

.header {
  position: relative;
  height: 65px;
  background: brown;
  overflow-y: hidden;
  overflow-x: hidden;
}
  
.topline {
  position: absolute;
  top: 0px;
  width: 100vw;
  height: 5px;
  background: blue;
  transition: 0.2s;
}

.topline.long {
  height: 65px;
  transition: 0.2s;
}

.topbar {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 10px;
  background:red;
}

.topbar div {
  flex: 1;
  color: white;
}

.content {
  height: calc(100vh - 65px);
  overflow-y: auto;
  overflow-x: hidden;
}

.content-parta {
  height: 800px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class='header'>
 <div class='topline'>
  
  </div>
  <div class='topbar'>
    <div>test1</div>
    <div>test2</div>
    <div>test3</div>
    <div>test4</div>
  </div>
 
</div>
<div class='content'>
  <div class='content-parta'>
    
  </div>
</div>

如果您从一个元素中删除该位置，那么按照树的顺序，另一个定位的元素将始终位于顶部。

$(document).ready(function() {
	$('.content').scroll(function() {
  	if ($(this).scrollTop() > 0) {
    	if (!$('.topline').hasClass('long'))
      	$('.topline').addClass('long')
    } else {
    	if ($('.topline').hasClass('long'))
      	$('.topline').removeClass('long')
    }
  });
});

.header {
  position: relative;
  height: 65px;
  background: brown;
  overflow-y: hidden;
  overflow-x: hidden;
}
  
.topline {
  position: absolute;
  top: 0px;
  width: 100vw;
  height: 5px;
  background: blue;
  transition: 0.2s;
}

.topline.long {
  height: 65px;
  transition: 0.2s;
}

.topbar {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  background:red;
}

.topbar div {
  flex: 1;
  color: white;
}

.content {
  height: calc(100vh - 65px);
  overflow-y: auto;
  overflow-x: hidden;
}

.content-parta {
  height: 800px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class='header'>
 <div class='topline'>
  
  </div>
  <div class='topbar'>
    <div>test1</div>
    <div>test2</div>
    <div>test3</div>
    <div>test4</div>
  </div>
 
</div>
<div class='content'>
  <div class='content-parta'>
    
  </div>
</div>

一个元素的位置是绝对的，另一个元素的位置是相对的，其中一个是上位

2 个答案: