绝对vs相对CSS位置

具有绝对位置属性的div。绝对vs相对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>

与相对位置属性一个DIV。

<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属性applied.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

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

绝对：一个ABSOLUTE定位元素相对于它的最接近定位的父母。如果有人在场，那么它就像固定相对于窗户一样工作。

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的位置相对，则中间div将改变它相对于第一个父div的位置。

来源

2017-01-29 06:00:12 acmsohail

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

所以，对于高度（和最小高度）没有区别，但对于宽度来说，是的，相对元素的作用就像它具有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; –

绝对vs相对CSS位置

回答

相关问题