如何在绝对位置右侧放置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

回答

相关问题