Question

以下是包含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>

虽然内部元素显得恰到好处，但我不清楚左边和下边的位置是如何计算的。是对的。我可以假设另一个会被忽略（基于写入模式）。这个问题特定于跨度元素。

Answer 1

您应该期望跨度消耗最近父级的整个宽度，其位置为：relative set。

如果父级没有位置：相对设置，跨度将消耗窗口的宽度。

Answer 2

如果浏览器希望符合W3C标准，则

top和left优先于bottom和right：

如果全部三个＆＃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;

http://www.w3.org/TR/CSS2/visudet.html

中的

Answer 3

您会期望使用width: 100%获得类似的结果。例如：

＆＃13;

.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;

如果我为跨度指定左侧和右侧，则预期的行为是什么

3 个答案: