позиция в CSS - PullRequest
       10

позиция в CSS

7 голосов
/ 31 мая 2010

В чем разница между относительной позицией и абсолютной позицией - это CSS например .стиль { позиция: относительная; }

.style { позиция: абсолютная; }

Ответы [ 5 ]

5 голосов
/ 31 мая 2010

Из W3schools :

Absolute

Генерирует абсолютно позиционированный элемент, расположенный относительно первый родительский элемент, который имеет положение, отличное от статического. позиция элемента указывается с «левый», «верхний», «правый» и «нижние» свойства

Относительная

Генерирует относительно позиционированный элемент, расположенный относительно его нормальная позиция, так что "left: 20" добавляет 20 пикселей в левую позицию элемента

Также проверьте эту страницу , она даст вам очень хороший обзор позиций в CSS.

3 голосов
/ 31 мая 2010

Стандарт описывает это здесь: Сравнение нормального потока, поплавков и абсолютного позиционирования

Есть ли что-то особенное в этом, что вы не понимаете или не хотите объяснять дальше?

1 голос
/ 31 мая 2010

Используйте относительно , если учитывать диапазон до родительского элемента или элементов ранее.

Используйте absolute , когда вы хотите сделать элемент в неприкосновенной позиции.

Вы также можете узнать разницу между свойством margin-left и left css для относительного и абсолютного

<html>
<body>
    <div style="width:300px; height:200px; margin:auto; background:red">
        <div style="position:relative; left:10px; top:20px;">
            test
        </div>
        <div style="position:relative; left:10px; top:20px;">
            test
        </div>
        <div style="position:absolute; left:0; bottom:0px;">
            test
        </div>
                    <div style="position:absolute; margin-left:0; margin-bottom:0px;">
            test
        </div>
    </div>
</body>

1 голос
/ 31 мая 2010
1 голос
/ 31 мая 2010

С помощью относительного вы можете позиционировать элемент относительно его исходного положения, а оригинальное пространство все еще удерживает элемент.

Absolute выводит элемент из обычного потока HTML, и вы можете расположить его относительно родительского элемента.

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