如何使用絕對 position 在右側放置一個 div
[英]How to place a div on the right side with absolute position
問題描述
我有一個頁面，必須在不干擾實際頁面的情況下顯示動態消息框。 此消息框必須出現在與現有內容重疊的頁面右上角。
我嘗試使用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>
此消息框的寬度應為.container的50% ，並且消息框的左側不應與其重疊。 即我們應該能夠單擊/選擇左側的內容。
請在此處查找樣本。
請幫我解決這個問題。
8 個解決方案
解決方案1
67 已采納 2012-03-16 10:26:44
yourbox{
position:absolute;
right:<x>px;
top :<x>px;
}
將其放置在右角。 請注意，位置取決於第一個非static定位的祖先元素！
編輯：
解決方案2
50 2013-12-15 10:55:45
yourbox {
position: absolute;
left: 100%;
top: 0;
}
左：100%； 是這里的重要問題！
解決方案3
20 2018-04-24 07:37:16
對於右上角試試這個：
position: absolute;
top: 0;
right: 0;
解決方案4
5 2016-04-15 16:50:22
您可以使用“ translateX ”
<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>
解決方案5
3 2018-04-03 20:08:20
很簡單，使用絕對定位，而不是指定頂部和左側，而是指定頂部和右側！
例如：
#logo_image {
width:80px;
height:80px;
top:10px;
right:10px;
z-index: 3;
position:absolute;
}
解決方案6
1 2012-03-16 10:27:39
您可以嘗試以下操作：
float: right;
解決方案7
1 2012-03-16 10:34:24
我假設您的容器元素可能是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>
使用主容器外的對話框，您可以使用相對於頁面的絕對定位。
解決方案8
0 2022-09-16 09:33:32
它對我有用：
.yourbox {
position: absolute;
display: block;
top: 0;
right: 0;
left: inherit;
}
這里很重要——左：繼承；
如何在不使用絕對位置的情況下從右側阻止 div 的寬度擴展？
[英]how to block width expansion of div from right side without using position absolute?
如何在沒有絕對位置和浮動的情況下將div定位到容器的右端？
[英]How to position a div to right end of the container without absolute position and float?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.