Как разместить div с правой стороны с абсолютной позицией - PullRequest
Новая
       36

Как разместить div с правой стороны с абсолютной позицией

31 голосов
/ 16 марта 2012

У меня есть страница, где должно отображаться динамическое окно сообщения, не мешая реальной странице. Это окно сообщения должно появиться в верхнем правом углу страницы, перекрывая существующее содержимое.

Я пытался использовать 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, и левая сторона окна сообщения не должна перекрываться им. т.е. мы должны быть в состоянии щелкнуть / выбрать содержимое левой стороны.

Пожалуйста, найдите образец здесь .

Пожалуйста, помогите мне решить эту проблему.

Ответы [ 7 ]

48 голосов
/ 16 марта 2012 
yourbox{
   position:absolute;
   right:<x>px;
   top  :<x>px;
}

позиционирует его в правом углу. Обратите внимание, что позиция зависит от первого элемента-предка, который не позиционирован static!

EDIT:

Я обновил вашу скрипку .

36 голосов
/ 15 декабря 2013 
yourbox {
   position: absolute;
   left: 100%;
   top: 0;
}

Слева: 100%; является важным вопросом здесь!

4 голосов
/ 24 апреля 2018

попробуйте это:

слева: calc (100% - [ширина вашего div] px);

3 голосов
/ 15 апреля 2016

Вы можете использовать " 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>
1 голос
/ 16 марта 2012

Я предполагаю, что ваш контейнерный элемент, вероятно, 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 голос
/ 16 марта 2012

Можете ли вы попробовать следующее: 

float: right;
0 голосов
/ 03 апреля 2018

Простой, используйте абсолютное позиционирование, и вместо указания вершины и левого, задайте верх и право!

Например: 

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