绝对位置内的绝对位置:绝对定位父块的宽度
这里是我的代码...绝对位置内的绝对位置......当我给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>
位置绝对shrinkswraps元素,并在文档正常流动也没有采取空间。
谢谢...))) –
一个快速,简单的搜索了一下这些可能的解释:
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
跨度的行为/定位改变确切的解释。
希望这可以帮助你澄清行为。
谢谢凯文 –
预期产量是多少? –
_“我不明白为什么?”_ - 因为:https://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width – CBroe
我只是不明白这个问题...我知道,绝对定位的元素是自动给出显示:块,所以绝对位置内的绝对位置使父div内联......为什么? –