web-dev-qa-db-ja.com

絶対位置で右側にdivを配置する方法

実際のページに影響を与えずに動的メッセージボックスを表示する必要があるページがあります。このメッセージボックスは、既存のコンテンツと重複するページの右上隅に表示する必要があります。

position: absoluteを使用しようとしましたが、右隅に配置できません。また、Bootstrapからレスポンシブデザインをサポートする必要があるため、leftを使用できません。

マークアップのサンプルはこちら

<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である必要があり、メッセージボックスの左側が重ならないようにする必要があります。つまり、左側のコンテンツをクリック/選択できるはずです。

サンプルを見つけてください こちら 。

この問題を解決するのを手伝ってください。

htmlcsscss-positionabsolute
33
Arun P Johny
yourbox{
   position:absolute;
   right:<x>px;
   top  :<x>px;
}

右隅に配置します。位置は、static配置されていない最初の祖先要素に依存していることに注意してください。

編集：

フィドルを更新しました 。

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

left：100％;はここで重要な問題です！

37
Z. Rahman Raju

これを試して：

左：calc（100％-[divの幅] px）;

4
Yosef Tukachinsky

「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>
3
Alexander Ivashchenko

あなたのコンテナ要素はおそらく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>

メインコンテナの外側のダイアログボックスを使用すると、ページに対する相対的な絶対配置を使用できます。

1
Stephen Reid

あなたは次を試すことができます：

float: right;
1
KristofMols

シンプル、絶対配置を使用し、上と左を指定する代わりに、上と右を指定してください！

例えば：

#logo_image {
    width:80px;
    height:80px;
    top:10px;
    right:10px;
    z-index: 3;
    position:absolute;
}
1
n8glenn