CSS вложенный Div с абсолютной позицией? - PullRequest
Новая
       4

CSS вложенный Div с абсолютной позицией?

4 голосов
/ 16 февраля 2010

Вот репродукция гораздо более сложного случая: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
    <div style="position:absolute;left:500px;top:200px;width:200px;background-color:red;";>
        AS HDSKLAJD KLASJD KLASJ DKLASJDKL JASKLD JKLAS JDKLASD AS HDSLAJD
        <p>
        sadas dasd sad asd sadas dasd sad asdsadas dasd sad asdsadas dasd sad asd
        </p>

        <div style="position:absolute;left:0;top:0;width:10px;background-color:green;";>
            CORNER
        </div>
    </div>
</body>
</html>

То, что я хочу, это иметь div с текстом УГЛА на 0,0 страницы. Я ЗНАЮ, что могу просто изменить DIV в html, чтобы он находился вне первого DIV с абсолютным, но я не могу этого сделать, поскольку в реальном случае я ограничен ContentPlaceHolder (ASP.NET). Итак, возможно ли иметь DIV, который вложен в другой DIV с абсолютной позицией и иметь его абсолютную координату на странице?

Ответы [ 4 ]

12 голосов
/ 16 февраля 2010

Итак, возможно ли иметь DIV, который вложен в другой DIV с абсолютной позицией и иметь его абсолютную координату на странице?

Не абсолютно по отношению к странице, нет. Вы можете использовать отрицательные значения left и top, чтобы переместить DIV за пределы контейнера - если координаты контейнера left и top фиксированы, вы можете добиться такого эффекта - но координаты всегда будут относительно контейнера, а не страницы.

Редактировать: Есть position:fixed, который делает вырванным из контейнера (попробуйте изменить его в своем примере, left: 0px top: 0px поместит его в верхний левый угол страницы как вы хотите), но он имеет очевидный побочный эффект: он фиксируется в окне просмотра, а не в документе - так что это полезно, только если в теле не происходит прокрутка.

1 голос
/ 16 февраля 2010

Может быть, это не обобщенное решение, которое вам нужно, но вы можете изменить абсолютное позиционирование внешнего <div> на margin: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
    <div style="margin-left:500px;margin-top:200px;width:200px;background-color:red;";>
        AS HDSKLAJD KLASJD KLASJ DKLASJDKL JASKLD JKLAS JDKLASD AS HDSLAJD
        <p>
        sadas dasd sad asd sadas dasd sad asdsadas dasd sad asdsadas dasd sad asd
        </p>

        <div style="position:absolute;left:0;top:0;width:10px;background-color:green;";>
            CORNER
        </div>
    </div>
</body>
</html>

Когда вы сделаете это, внутренний <div> будет позиционироваться абсолютно внутри <body> - его ближайшего предка с нестатическим позиционированием.

0 голосов
/ 16 февраля 2010

Если вы ограничены ContentHolder, не могли бы вы сделать это? (Я использую комментарии JavaScript в HTML ... Это просто, хотя это не сработает: P) 

<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">
    </div> //close the content div
    <div style="position:absolute;left:0;top:0;width:10px;background-color:green;";>
        CORNER
    </div>
</asp:Content>

Редактировать: Хорошо, я только что понял, что это не будет работать, если есть контент после заполнителя. Я оставлю это, поскольку есть небольшой шанс, что это разрешит вещи (вероятно, очень маленький шанс)

0 голосов
/ 16 февраля 2010

Координаты для позиционирования абс используют ближайший родительский блок позиционируемого элемента. Таким образом, предполагая, что ваш div, создающий угол (и), не имеет родительских элементов, которые находятся в положении rel или abs, он по умолчанию поднимется вверх по цепочке до элемента html, который находится в 0,0 от области просмотра. Единственная проблема здесь - это может быть трудно сделать в зависимости от вашего макета. Таким образом, хотя теоретически это возможно, это может быть не практично. Лучше использовать положение относительно прямого родителя, а затем положение с отрицательными значениями.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...