Question

具有绝对位置属性的div。

＆＃13;

<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>

＆＃13;

＆＃13; 具有相对位置属性的div。

＆＃13;

<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>

＆＃13;

＆＃13; 当我使用绝对然后它没关系。但是相对位置div的最小宽度不起作用。请解释差异输出的原因，因为我们可以理解绝对和相对位置属性之间的区别。

Answer 1

相对：相对于它的当前位置，但可以移动。或者RELATIVE定位元素相对于ITSELF定位。

绝对：ABSOLUTE定位元素相对于IT'CLOSEST POSITIONED PARENT定位。如果有一个，那么它就像固定的.....相对于窗口。

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将改变它相对于第二个父div的位置。如果第一个父div位置是相对的，那么Middle div将改变它相对于第一个父div的位置。

Answer 2

根据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>

Answer 3

亲戚非常困惑，经常被滥用。首先，您必须了解相对意味着该位置相对于该元素通常所在的位置。为了正确使用它，甚至对要移动的元素产生影响，还必须添加位置属性。

例如，假设您希望对象从通常情况下向下移动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>

这应该有助于您理解定义以及它的使用更好一点。祝你好运！

Answer 4

绝对定位的元素的默认宽度是其中内容的宽度，不同于相对定位的元素，其默认宽度为其可填充的空间的100％（see note）< / p>

因此，对于高度（和最小高度）没有区别，但对于宽度，是的，相对元素的作用就像它有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>

绝对vs相对CSS位置

4 个答案: