绝对位置内的绝对位置：绝对定位父块的宽度

这里是我的代码...绝对位置内的绝对位置......当我给div div position: relative;它像块级别一样伸展在body标签上，但是当它给出position: absolute;，它看起来像一个内联级别的元素...我不明白为什么？绝对位置内的绝对位置：绝对定位父块的宽度

div { 
 
    background: red; 
 
    margin: 0 0 0 50px; 
 
    font-size: 2em; 
 
    position: absolute; 
 
} 
 

 
span { 
 
    background: green; 
 
    color: #fff; 
 
    height: 100px; 
 
    position: absolute; 
 
    left: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>ssss</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 

 
<body> 
 
    <div>Begining <span>NORO</span> some text text text</div> 
 
</body> 
 

 
</html>

来源

2017-06-22 Norayr Ghukasyan

预期产量是多少？ –

_“我不明白为什么？”_ - 因为：https：//www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width – CBroe

我只是不明白这个问题...我知道，绝对定位的元素是自动给出显示：块，所以绝对位置内的绝对位置使父div内联......为什么？ –

位置绝对shrinkswraps元素，并在文档正常流动也没有采取空间。

来源

2017-06-22 09:14:13 itacode

谢谢...））） –

一个快速，简单的搜索了一下这些可能的解释：

CSS-招数说以下（absolute relative fixed positioning how do they differ）：

相对。这种类型的定位可能是最容易混淆和误用的。它的真正含义是“相对于自身”。如果你设置位置：相对;在一个元素上，但没有其他定位属性（顶部，左侧，底部或右侧），它根本不会影响它的定位，它将与将它放在位置上一样：static;但是如果你确实给了它一些其他的定位属性，比如top：10px，它会把它的位置从原来的位置向下移动10个像素。我相信你可以想象，根据常规位置移动元素的能力非常有用。（...）当你设置position：relative时，会发生另外两件事：在你应该知道的元素上。一个是它引入了在该元素上使用z-index的能力，这对于静态定位的元素并不适用。即使您没有设置z-index值，该元素现在也会出现在任何其他静态定位元素的顶部。您无法通过在静态定位元素上设置较高的z-index值来对抗它。发生的另一件事是它限制了绝对定位的子元素的范围。任何相对定位元素的子元素都可以绝对定位在该块内。这带来了一些有力的机会，我谈到here。

绝对。这是一种非常强大的定位类型，它允许您将任何页面元素精确地放在您想要的位置。您可以使用顶部，左侧，底部的定位属性。并设置位置的权利。请记住，这些值将与相对（或绝对）定位的下一个父元素有关。如果没有这样的父母，它将默认回到元素本身，这意味着它将相对于页面本身放置。关于绝对定位的权衡（也是最重要的记忆）是这些元素从页面上的元素流中移除。具有此类定位的元素不受其他元素的影响，并且不会影响其他元素。每次使用绝对定位时，都要认真考虑这一点。过度使用或不当使用会限制您网站的灵活性。

当absolute positioning inside relative positioning看，你会看到为什么当父元素（在你的情况下）获得position: relative跨度的行为/定位改变确切的解释。

希望这可以帮助你澄清行为。

来源

2017-06-22 09:36:30

谢谢凯文 –

绝对位置内的绝对位置：绝对定位父块的宽度

回答

相关问题