绝对定位的元素不会被其容器

时间：2017-06-26 15:19:21

标签： html css html5 css3

我正在尝试实施“粘贴标头”＃39;在包含div的桌子上用最小的javascript。我有包含div，表头和主体分开，表头绝对定位。这几乎可行。我唯一的问题是标题出现在包含div的上方。有没有办法让我的表头出现在包含div（没有javascript）下面？我需要标题保持绝对位于该div的顶部。我已经在容器上尝试了z索引和相对定位。有什么我想念的吗？

在下面的代码段中，白色标题应由滚动条和绿色div隐藏。

有一点需要注意 - 我确实意识到我必须使用javascript来实现标题的水平滚动。但这个问题纯粹是关于标题的剪辑，同时在没有javascript的情况下保持垂直滚动。

这是我想要实现的结果：

滚动到顶部时：

enter image description here

滚动到底部时：

enter image description here

＆＃13;
＆＃13; 
.container-container {
  background-color:#ccffcc;
  z-index:3;
}
.container {
  background-color:#ffcccc;
  height: 150px;
  width: 200px;
  overflow: auto;
  z-index:1;
}
table {
  border-collapse: collapse;
}
th {
  width: 100px;
  min-width: 100px;
}
td {
  width: 100px;
  min-width: 100px;
  background-color: #e0e0e0;
}
thead {
  position: absolute;
  background-color: #fff;
  border: solid 1px #e0e0e0;
  z-index:2;
}
tbody {
  display: block;
  margin-top: 29px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-container">
  <div class="container">
    <table id="callLogExplorer">
      <thead>
        <tr>
          <th>head1</th>
          <th>head2</th>
          <th>head3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
      </tbody>
    </table>

  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

丢失<thead>和<tbody>，然后将<th>放在第一行。然后相应地设计它。 tr:first-of-type，而不是在css中定位thead。

.container-container {
  background-color:#ccffcc;
  z-index:3; position:relative;
}
.container {
  background-color:#ffcccc;
  height: 150px;
  width: 200px;
  overflow: auto;
  z-index:1;
}
table {
  border-collapse: collapse;
}
th {
  width: 100px;
  min-width: 100px;
}
td {
  width: 100px;
  min-width: 100px;
  background-color: #e0e0e0;
}
tr:first-of-type {
  background-color: #fff;
  border: solid 1px #e0e0e0;
  z-index:2;
  position:absolute; top:0;
  width: 180px; overflow-x: auto;
}
table {
  display: block;
  margin-top: 29px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-container">
  <div class="container">
    <table id="callLogExplorer">
        <tr>
          <th>head1</th>
          <th>head2</th>
          <th>head3</th>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
    </table>

  </div>

</div>

答案 1 :(得分：0)

这是你想要实现的目标吗？

如果需要，我可以给出进一步的解释。

.all-wrapper{
	border:2px solid black;
	width:510px;
	overflow:hidden;
}

.container1 {
	background-color:red;
	padding-top:30px;	
	position:relative;
	width:510px;
	
}

.container{
	background-color:yellow;	
	width:510px;
	height:150px;
	overflow-y:scroll;
	overflow-x:hidden;
}

table{
	background-color:magenta;
	width:510px;
}
thead{
	background-color:#00FF00;
	height:30px;
	width:510px;
	position:absolute;
	top:0;
	left:0;
}
thead th{
	width:500px;
	text-align:left;
}
<div class="all-wrapper">
    <div class="container1">
      <div class="container">
        <table id="callLogExplorer">
        
        <thead>
            <tr>
              <th>head1</th>
              <th>head2</th>
              <th>head3</th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
              <td>R0C0</td>
              <td>R0C1</td>
              <td>R0C2</td>
            </tr>
            <tr>
              <td>R1C0</td>
              <td>R1C1</td>
              <td>R1C2</td>
            </tr>
            <tr>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
            </tr>
            <tr>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
            </tr>
            <tr>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
            </tr>
            <tr>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
            </tr>
            <tr>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
            </tr>
            <tr>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
            </tr>
            <tr>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
            </tr>
            <tr>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
            </tr>
            <tr>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
            </tr>
            <tr>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
            </tr>
            <tr>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
            </tr>
            <tr>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
            </tr>
            <tr>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
            </tr>
            <tr>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
            </tr>
            <tr>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
            </tr>
            <tr>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
            </tr>
            <tr>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
              <td>asdfasd fas</td>
            </tr>
            <tr>
              <td>END C0</td>
              <td>END C1</td>
              <td>END C2</td>
            </tr>
        <tbody>
        
        </table>
      </div>
    </div>
    </div>

相关问题
最新问题