абсолютная и относительная позиция CSS

A div с абсолютным положением.абсолютная и относительная позиция CSS

<html> 
 
<head><title></title> 
 
<style type="text/css"> 
 
.mydiv 
 
{ 
 
position:absolute; 
 
background-color:red; 
 
min-width:150px; 
 
min-height:150px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="mydiv"></div> 
 
</body> 
 
</html>

ДИВ с относительной позиции собственности.

<html> 
 
<head><title></title> 
 
<style type="text/css"> 
 
.mydiv 
 
{ 
 
position:relative; 
 
background-color:red; 
 
min-width:150px; 
 
min-height:150px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="mydiv"></div> 
 
</body> 
 
</html>

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

источник

2017-01-29 Rashed bin hares

Я ответил на ваш интересный нить [здесь] (https://www.begueradj.com/min-dimention-absolute-relative.html#min-dimention-absolute-relative) –

Согласно reference «Абсолютное местоположение - точное место на карте места, а относительное местоположение - это оценка того, где место находится по отношению к другим достопримечательностям». Что это означает, что относительный учитывает родительский div, но абсолют абсолютно абсолютен. У меня есть решение для вашего вопроса, чтобы вы поняли, что это значит.

<html> 
    <head><title></title> 
    <style type="text/css"> 
    .mydiv 
    { 
    position:relative; 
    background-color:red; 
    min-width:150px; 
    min-height:150px; 
    } 
    .container{ 
     width:150px; 
     height:150px; 
    } 
    </style> 
    </head> 
    <body class="container"> 
    <div class="mydiv"></div> 
    </body> 
    </html>

источник

2017-01-29 05:50:50

Благодарим вас за ответ, мой вопрос к вам в том, что вы увидите в моем втором файле свойство min-height, но не min-width.if относительная позиция принимает родительский div, это правильно, но почему свойство min-height применяется.is он не должен применяться как минимальная ширина, потому что нет родительского div. –

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

Например, скажите, что вы хотите, чтобы объект перемещал 10px вниз от того места, где он обычно был. Затем вы добавили бы: top: 10px; к коду. Это переместило бы объект DOWN 10px из его исходного положения.

Итак, ваш код будет выглядеть следующим образом:

<html> 
<head><title></title> 
<style type="text/css"> 
.mydiv 
{ 
position:relative; 
top: 10px; 
background-color:red; 
min-width:150px; 
min-height:150px; 
} 
</style> 
</head> 
<body> 
<div class="mydiv"></div> 
</body> 
</html>

Это должно помочь вам понять определение, а также использовать его немного лучше. Удачи!

источник

2017-01-29 05:58:35 MonkeyWithMachine

Относительное: Относительно его текущего положения, но его можно перемещать. Или ОТНОСЯЩИЙ позиционированный элемент расположен относительно СЕБЯ.

Абсолют: АБСОЛЮТНЫЙ позиционированный элемент расположен относительно ОТКРЫТОГО ПОЛОЖИТЕЛЬНОГО РОДИТЕЛЯ. если он присутствует, то он работает как фиксированный ..... относительно окна.

Check demo

HTML

<div class="parent"> 
    <div class="mydiv"></div> 
</div>

CSS

.parent{ 
width:150px; 
height:150px; 
} 
.mydiv 
{ 
position:relative; 
background-color:red; 
min-width:150px; 
min-height:150px; 
}

Здесь второе положение родителя DIV относительно поэтому средний DIV будет меняет свое положение относительно 2-го родителя дел. Если 1-я родительская позиция div будет относительной, то средний div изменит ее положение по отношению к первому родительскому div.

источник

2017-01-29 06:00:12 acmsohail

По умолчанию ширина элемента, абсолютно позиционируется ширина содержания в нем, в отличие от элемента, который позиционирован относительно где это по умолчанию ширина составляет 100% от пространства он может заполнить (see note)

Таким образом, для высоты (и min-height) нет разницы, но для ширины да, относительный элемент действует так же, как у него 100% -ная ширина.

<html> 
 
<head><title></title> 
 
<style type="text/css"> 
 
.mydiv 
 
{ 
 
    position:relative; 
 
    background-color:red; 
 
    width:150px; /* default width is 100% for relative elements */ 
 
    min-height:150px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="mydiv"></div> 
 
</body> 
 
</html>

источник

2017-01-29 06:05:19

Какая у вас? это ясно или любой вопрос? –

вы использовали ширина: 150px; но я использовал min-width: 150px; –

абсолютная и относительная позиция CSS

ответ

Смежные вопросы