1. 首頁
  2. 問答
  3. 如何對齊相對容器內的css固定元素？

如何對齊相對容器內的css固定元素？

2014-11-04 88 views
0

我試圖在一個可滾動的容器中放置一個固定的「標題」......因此，當您滾動時，標題始終位於頂部......對於某些虛假未知原因，它始終將標題置於實際窗口頂部而不是位置：相對容器。如何對齊相對容器內的css固定元素？

下面是一個例子：

http://jsfiddle.net/1hzpLupq/2/

誰能解釋：1）爲什麼出現這種情況，和2）我如何能實現我的目標是什麼？

謝謝。

.outer-container { 
 
    height: 500px; 
 
    background: blue; 
 
    display: block; 
 
} 
 
.offsetinator { 
 
    padding-top: 100px; 
 
} 
 
.inner-container { 
 
    width: 100%; 
 
} 
 
.container { 
 
    position: relative; 
 
    background: teal; 
 
    overflow: auto; 
 
    height: 50px; 
 
    width: 100%; 
 
} 
 
.header { 
 
    position: fixed; 
 
    top: 0; 
 
    background: orange; 
 
} 
 
.row { 
 
    background: green; 
 
} 
 
.row span { 
 
    background: gray; 
 
    padding: 0 25px; 
 
}
<div class="outer-container"> 
 
    <div class="offsetinator"> 
 
    <div class="inner-container"> 
 
     <div class="container"> 
 
     <div class="header"> 
 
      <div class="row"> 
 
      <span>thing1</span> 
 
      <span>thing2</span> 
 
      </div> 
 
     </div> 
 

 
     <div class="body"> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2014-11-04 patrick

回答

0

固定的位置總是與您的視口有關，所以這已經阻止您做你想做的事。

我能想到的唯一建議是改變HTML的結構，使標題在帶有foobar的容器的外部。如果它在外面，則可以使用絕對或相對，並使用上/左移動到您想要的位置。

所以我真正做到這一點是爲了將容器外的標題移動到容器外，並將標題置於相對位置。就這樣。

http://jsfiddle.net/1hzpLupq/5/

.outer-container { 
 
    height: 1000px; 
 
    background: blue; 
 
    display: block; 
 
} 
 

 
.offsetinator { 
 
    padding-top: 100px; 
 
} 
 

 
.inner-container { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    background: teal; 
 
    overflow: auto; 
 
    height: 50px; 
 
    width: 100%; 
 
} 
 

 
.header { 
 
    position: relative; 
 
    background: orange; 
 
} 
 

 
.row { 
 
    display: table-row; 
 
    background: green; 
 
} 
 

 
.row span { 
 
    display: table-cell; 
 
    background: gray; 
 
    padding: 0 25px; 
 
}
<div class="outer-container"> 
 
    <div class="offsetinator"> 
 
     <div class="header"> 
 
        <div class="row"> 
 
         <span>thing1</span> 
 
         <span>thing2</span> 
 
        </div> 
 
       </div> 
 
     <div class="inner-container"> 
 
      <div class="container"> 
 
       
 
    
 
       <div class="body">    
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2014-11-04 18:53:34 chdltest

0

position: fixed總是相視（瀏覽器窗口）。

我想你可以通過在.headerposition: absolute並從.container移動height: 50px和overflow: auto到.body實現自己的目標。您將需要更改height，因爲標題不再是其中的一部分。

.outer-container { 
 
    height: 500px; 
 
    background: blue; 
 
    display: block; 
 
} 
 
.offsetinator { 
 
    padding-top: 100px; 
 
} 
 
.inner-container { 
 
    width: 100%; 
 
} 
 
.container { 
 
    position: relative; 
 
    background: teal; 
 
    width: 100%; 
 
} 
 
.header { 
 
    position: absolute; 
 
    top: 0; 
 
    background: orange; 
 
} 
 
.body { 
 
    overflow: auto; 
 
    height: 50px; 
 
} 
 
.row { 
 
    background: green; 
 
} 
 
.row span { 
 
    background: gray; 
 
    padding: 0 25px; 
 
}
<div class="outer-container"> 
 
    <div class="offsetinator"> 
 
    <div class="inner-container"> 
 
     <div class="container"> 
 
     <div class="header"> 
 
      <div class="row"> 
 
      <span>thing1</span> 
 
      <span>thing2</span> 
 
      </div> 
 
     </div> 
 

 
     <div class="body"> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
      <div class="row"> 
 
      <span>foobar 1</span> 
 
      <span>foobar 2</span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2014-11-04 18:46:06 ckuijjer

0 

body{ 
 
margin:0; 
 
} 
 

 
.outer-container { 
 
    height: 1000px; 
 
    background: blue; 
 
    display: block; 
 
} 
 

 
.offsetinator { 
 
    padding-top: 100px; 
 
} 
 

 
.inner-container { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    background: teal; 
 
    overflow: auto; 
 
    height: 50px; 
 
    width: 100%; 
 
} 
 

 
.header { 
 
    position: fixed;  
 
    background: orange; 
 
} 
 

 
.row { 
 
    display: table-row; 
 
    background: green; 
 
} 
 

 
.row span { 
 
    display: table-cell; 
 
    background: gray; 
 
    padding: 0 25px; 
 
}
<div class="outer-container"> 
 
    <div class="offsetinator"> 
 
     <div class="inner-container"> 
 
      <div class="container"> 
 
       <div class="header"> 
 
        <div class="row"> 
 
         <span>thing1</span> 
 
         <span>thing2</span> 
 
        </div> 
 
       </div> 
 
    
 
       <div class="body">    
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
        <div class="row"> 
 
         <span>foobar 1</span> 
 
         <span>foobar 2</span> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

添加到CSS： 體{ 餘量：0; }

來源

2014-11-04 18:47:11 vrajesh

+0

呃..沒有？不工作.. – patrick 2014-11-04 18:55:07

0
  1. position: fixed總是忽略盒模型一路攀升到文檔體。

  2. 不幸的是，但可能是出於很好的理由，沒有辦法將固定的相對於父元素（除了主體）相對定位。解決辦法：取消固定的風格和滾動添加到您的<div class="body">

    的jsfiddle：http://jsfiddle.net/1hzpLupq/6/

來源

2014-11-04 19:23:18 kpatient

相關問題

 相關問題