如何在絕對位置右側放置div

我有一個頁面，其中必須顯示動態消息框而不會影響實際頁面。此消息框必須出現在與現有內容重疊的頁面的右上角。如何在絕對位置右側放置div

我試過使用position: absolute但後來我無法將它放在右上角。此外，我無法使用left，因爲我必須支持Bootstrap的響應式設計。

下面是一個示例標記

<html> 
    <body> 
     <div class="container"> 
      <!-- Need to place this div at the top right of the page--> 
      <div class="ajax-message"> 
       <div class="row"> 
        <div class="span9"> 
         <div class="alert"> 
          <a class="close icon icon-remove"></a> 
          <div class="message-content"> 
           Some message goes here 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <!-- Page contents starts here. These are dynamic--> 
      <div class="row"> 
       <div class="span12 inner-col"> 
        <h2>Documents</h2> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

該消息框應具有50%的寬度相對於所述.container和消息框的左側不應當由它重疊。即我們應該能夠點擊/選擇左側的內容。

請找到樣品here。

請幫我解決這個問題。

來源

2012-03-16 Arun P Johny

http://stackoverflow.com/questions/11333624/css-float-right-and-position-absolute-doesnt-work-together – Nick 2016-01-08 18:57:51

yourbox{ 
    position:absolute; 
    right:<x>px; 
    top :<x>px; 
}

位置在正確的角落。請注意，位置取決於不是位於第一個祖先元素的位置！

編輯：

I updated your fiddle。

來源

2012-03-16 10:26:44 Christoph

你可以嘗試以下方法：

float: right;

來源

2012-03-16 10:27:39 Molske

我假設你的容器元素可能是position:relative;。這意味着對話框將相應地放置到容器中，而不是頁面。

你可以將標記更改爲這個嗎？

<html> 
<body> 
    <!-- Need to place this div at the top right of the page--> 
     <div class="ajax-message"> 
      <div class="row"> 
       <div class="span9"> 
        <div class="alert"> 
         <a class="close icon icon-remove"></a> 
         <div class="message-content"> 
          Some message goes here 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    <div class="container"> 
     <!-- Page contents starts here. These are dynamic--> 
     <div class="row"> 
      <div class="span12 inner-col"> 
       <h2>Documents</h2> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

隨着主容器外的對話框，那麼你可以使用相對絕對定位到頁面上。

來源

2012-03-16 10:34:24

yourbox { 
    position: absolute; 
    left: 100%; 
    top: 0; 
}

left：100％;這裏是重要的問題！

來源

2013-12-15 10:55:45

'離開：100％'把div的左邊緣放在窗口的最右邊，所以div的其餘部分是隱藏的。「剩下的：94％'爲我工作。很好的解決方案，謝謝 – gibberish 2014-03-15 03:05:08

您可以使用「平移X」

<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>

來源

2016-04-15 16:50:22

如何在絕對位置右側放置div

回答

相關問題