絕對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位置

回答

相關問題