Pozisyon eleman, dikey, yatay, sabit mutlak

SORU

21 Temmuz 2010, ÇARŞAMBA

Pozisyon eleman, dikey, yatay, sabit mutlak

Başarmak için çalışıyorum:

İhtiyacım olan bir düğme konumlandırılmış belli bir mesafeden sağ tarafında bir div ve her zaman aynı mesafeden yan div boyutu ne olursa olsun görüntü, ama kaydırma ile pencere.

X böylece her zaman div sağ taraftan piksel, ama her zaman görünüm port üstünden y piksel.

Bu mümkün mü?

CEVAP

21 Temmuz 2010, ÇARŞAMBA

Yatay Pozisyon Sabit Element Başka Bir Element Tabanlı

(Yasal Uyarı Not: The solution offered here teknik olarak değil "absolute horizontally" gibi soru Başlığı belirtilen, ama bunu başarmak ne OP aslında istedim, sabit pozisyon eleman olmak 'X' mesafeden sağ kenar başka ama sabit olan dikey kaydırma.)

Css zorlukları bu tür seviyorum. Kavramının bir kanıtı olarak, evet, you can get what you desire. İhtiyaçlarınız için bazı şeyleri değiştirmek zorunda kalabilirsiniz, ama burada FireFox, IE8 ve 7 (IE6, tabii ki, position: fixed yok) geçen bazı örnek html ve css.

HTML:

<body>
  <div class="inflow">
    <div class="positioner"><!-- may not be needed: see notes below-->
      <div class="fixed"></div>
    </div>
  </div>
</body>

CSS (sınırlar ve gösteri için tüm Boyutlar):

div.inflow {
  width: 200px; 
  height: 1000px; 
  border: 1px solid blue; 
  float: right; 
  position: relative; 
  margin-right: 100px;
}
div.positioner {position: absolute; right: 0;} /*may not be needed: see below*/
div.fixed {
  width: 80px; 
  border: 1px solid red; 
  height: 100px; 
  position: fixed; 
  top: 60px; 
  margin-left: 15px;
}

Anahtardiv.fixed yatay için left right ayarlanmadı ama iki sarıcı divs yatay konumunu ayarlamak için kullanın. div.positionerdeğildiv.fixed sol kenar kabın bilinen genişliği ayarlanabilir div.inflow gerekirse sabit bir genişlik. Eğer konteyner'den yüzde genişliği için arzu ederseniz, ancak o zaman div.positioner div.inflow sağ tarafına div.fixer ilk itmek gerekir.

Düzenleme:overflow: hidden bunu yapmak zorunda gereken bir () hiç ilginç bir yan not olarak, div.inflow vardıhiçbir etkisi yoksabit pozisyon dışında varlık dıv diğer sınırları. Görünüşe göre sabit konumda overflow içeren div bağlam dışına almak için yeterlidir.

Bunu Paylaş: