以下是包含position:absolute; top:0px; left:0px; right:0px;
.textStyle1 {
font-size:24px;
font-family:'Arial';
position:absolute;
top:0px;
left:0px;
right:0px;
}
#div1 {
position:absolute;
left:100px;
top:100px;
width:200px;
height:200px;
}
#div2 {
position:absolute;
left:100px;
top:100px;
width:200px;
height:200px;
writing-mode:tb-rl;
}
用于放置在span
s
div
<div id="div2">
<span class="textStyle1">Some text</span>
<span class="textStyle1" style="left:2px; top:30px;">Another line of text</span>
</div>
<div id="div2">
<span class="textStyle1">Some text</span>
<span class="textStyle1" style="left:2px; top:30px;">Another line of text</span>
</div>
.textStyle1 {
font-size: 24px;
font-family: 'Arial';
position: absolute;
top: 0px;
left: 0px;
right: 0px;
}
#div1 {
position: absolute;
left: 50px;
top: 100px;
width: 200px;
height: 200px;
background-color: Yellow;
}
#div2 {
position: absolute;
left: 270px;
top: 100px;
width: 200px;
height: 200px;
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
background-color: Cyan;
}
<div id="div1">
<span class="textStyle1">Some text</span>
<span class="textStyle1" style="left:2px; top:30px;">Another line of text</span>
</div>
<div id="div2">
<span class="textStyle1">Some text</span>
<span class="textStyle1" style="top:2px; right:30px;">Another line of text</span>
</div>
虽然内部元素显得恰到好处,但我不清楚左边和下边的位置是如何计算的。是对的。 我可以假设另一个会被忽略(基于写入模式)。这个问题特定于跨度元素。
答案 0 :(得分:1)
您应该期望跨度消耗最近父级的整个宽度,其位置为:relative set。
如果父级没有位置:相对设置,跨度将消耗窗口的宽度。
答案 1 :(得分:1)
top
和left
优先于bottom
和right
:
http://www.w3.org/TR/CSS2/visudet.html 中的如果全部三个&#39; left&#39;,&#39; width&#39;和&#39; right&#39;是&#39; auto&#39;:首先设置任何&#39; auto&#39; &#39; margin-left&#39;的值和&#39; margin-right&#39;到0.然后, 如果&#39;方向&#39;建立的元素的属性 包含静态位置的块是&#39; ltr&#39;设置&#39;离开&#39;对静态 立场并在下面适用第三条规则;否则,设置正确的&#39;至 静态位置并在下面应用规则第一。
如果三者中没有一个是&#39; auto&#39;:如果两者都是&#39;自我保留&#39;和&#39; margin-right&#39;是&#39; auto&#39;,解决额外的等式 约束,两个边距得到相等的值,除非这样 使它们为负,在这种情况下,当包含的方向 阻止是&#39; ltr&#39; (&#39; rtl&#39;),设置&#39; rt-left&#39; (&#39; margin-right&#39;)为零和 解决'保证金权利'&#39; (&#39;利润率左&#39)。如果其中一个边距离开&#39;要么 &#39;余量右&#39;是&#39; auto&#39;,解决该值的等式。如果 值过度约束,忽略&#39; left&#39; (如果是 &#39;方向&#39;包含块的属性是&#39; rtl&#39;)或&#39; right&#39; (在 案例&#39;方向&#39;是&#39; ltr&#39;)并解决这个价值。
否则,请设置&#39; auto&#39; &#39; margin-left&#39;的值和&#39; margin-right&#39;为0,并选择适用的以下六个规则之一。
&#39;左&#39;和#&#39;宽度&#39;是&#39; auto&#39;并且&#39;对&#39;不是自动&#39;然后宽度缩小到适合。然后解决'左'&#39; &#39;左&#39;并且&#39;对&#39;是&#39; auto&#39;和#&#39;宽度&#39;不是&#39;自动&#39;然后如果&#39;方向&#39;建立的元素的属性 包含静态位置的块是&#39; ltr&#39;设置&#39;离开&#39;对静态 位置,否则设置正确&#39;到静态位置。然后解决 &#39;左&#39; (如果&#39;指示是&#39; rtl&#39;)或&#39;正确&#39; (如果&#39;方向&#39;是&#39; ltr&#39;)。 &#39;宽度&#39;并且&#39;对&#39;是&#39; auto&#39;并且&#39;离开&#39;不是自动&#39;然后宽度缩小到适合。然后解决'对'&#39; &#39;左&#39;是&#39; auto&#39;,&#39; width&#39;并且&#39;对&#39;不是&#39; auto&#39;然后解决&#39; left&#39; &#39;宽度&#39;是&#39; auto&#39;,&#39; left&#39;并且&#39;对&#39;不是&#39;自动&#39;然后解决宽度&#39; &#39;右&#39;是&#39; auto&#39;,&#39; left&#39;和#&#39;宽度&#39;不是&#39;自动&#39;然后解决&#39;对&#39;
答案 2 :(得分:1)
您会期望使用width: 100%
获得类似的结果。例如:
.container {
height: 400px;
width: 400px;
position: relative;
}
.red {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 100px;
background: rgba(255, 0, 0, .33);
}
.green {
position: absolute;
top: 0;
left: 100px;
right: 100px;
bottom: 0;
background: rgba(0, 255, 0, .33);
}
.blue {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 266, .33);
}
&#13;
<div class="container">
<div class="blue">Full Size</div>
<div class="red">Full Width</div>
<div class="green">Full Height</div>
</div>
&#13;