Sağa kay ve mutlak konum birlikte çalışmıyor

Bir div'in her zaman üst div'in sağında olmasını istiyorum, bu yüzden kullanıyorum float:right. İşe yarıyor.

Ancak, eklendiğinde diğer içeriği etkilememesini de istiyorum, bu yüzden kullanıyorum position:absolute.

Şimdi float:rightçalışmıyor, benim div her zaman üst div'in solunda. Nasıl sağa kaydırabilirim?

kullanım

position:absolute; right: 0;

float:rightMutlak konumlandırmaya gerek yok

Ayrıca, ana öğenin şu şekilde ayarlandığından emin olun: position:relative;

Genel olarak konuşursak, floatöğenin üst konteynerine göre konumunu belirlediği için (sağa veya sola kayan) göreceli bir konumlandırma ifadesidir. Bu, position:absoluteözellik ile uyumsuz olduğu anlamına gelir , çünkü position:absolutemutlak bir konumlandırma ifadesidir. Ya bir öğeyi yüzer ve tarayıcının üst kapsayıcısına göre konumlandırmasına izin verebilir ya da mutlak bir konum belirleyebilir ve öğeyi üst öğesinden bağımsız olarak belirli bir konumda görünmeye zorlayabilirsiniz. Kesin olarak konumlandırılmış bir öğenin ekranın sağ tarafında görünmesini istiyorsanız, kullanabilirsiniz position: absolute; right: 0;, ancak bu, öğenin ana öğesinin ne kadar geniş olduğuna bakılmaksızın her zaman ekranın sağ kenarında görünmesine neden olur div(böylece kazandı '' t "üst div'in sağında" olmalıdır).

Mutlak öğeniz " display: inline-block " ise " translateX (-100%) " ve " text-align: right " kullanabilirsiniz

<div class="box">
<div class="absolute-right"></div>
</div>

<style type="text/css">
.box{
    text-align: right;
}
.absolute-right{
    display: inline-block;
    position: absolute;
}

/*The magic:*/
.absolute-right{
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
</style>

Ebeveynine göre sağa hizalanmış mutlak eleman alacaksınız

Belki de içeriğinizi şu şekilde float kullanarak bölmelisiniz:

<div style="overflow: auto;">
    <div style="float: left; width: 600px;">
        Here is my content!
    </div>
    <div style="float: right; width: 300px;">
        Here is my sidebar!
    </div>
</div>

Dikkat edin overflow: auto;, bu, konteynırınızın biraz yüksekliğinden emin olmak içindir. Kayan nesneler onları DOM'un dışına çıkarır, aşağıdaki öğelerinizin dolaşan yüzer divsayılarınızla örtüşmemesini sağlamak için, boyunuzu çizerken yüzen sayıların hesaba katılmasını sağlamak için bir overflow: auto(veya overflow: hidden) içeren bir kap ayarlayın . Şamandıralar ve bunların nasıl kullanılacağı hakkında daha fazla bilgiye buradan göz atın .

Sağda yüzen bir öğeyi bir katman iç içe geçme ve zor bir kenar boşluğu ile kesinlikle konumlandırabildim:

function test() {
  document.getElementById("box").classList.toggle("hide");
}

.right {
  float:right;
}
#box {
  position:absolute; background:#feb;
  width:20em; margin-left:-20em; padding:1ex;
}
#box.hide {
  display:none;
}

<div>
  <div class="right">
    <button onclick="test()">box</button>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

Bunu, çevreleyen metnin akışını nasıl etkilemediğini görebilmeniz için değiştirilebilir hale getirmeye karar verdim (çalıştırın ve kayan mutlak kutuyu göstermek / gizlemek için düğmeye basın).