Question

在父元素位置相对内，i在p元素中包含绝对位置，但是＆＃34; p＆＃34;当我包括“顶部”位置时元素不移动。查看下面的代码..

<div class="btnClass">
  <p>ghghg</p>
  </div>

和css -

.btnClass{
  position: relative;
}
p{
  position: absolute;
  top: 20%;/*this is not working*/
  left: 15%;
  border: 1px solid red;
  display: block;
}

Answer 1

父btnClass需要高度

注意，div的宽度默认为浏览器视口，其高度按其内容或显式设置，因此left: 15%工作但top: 20%不工作

＆＃13;

.btnClass {
  position: relative;
  height: 200px;
}
p {
  position: absolute;
  top: 20%;
  left: 15%;
  border: 1px solid red;
  display: block;
}

＆＃13;

<div class="btnClass">
  <p>ghghg</p>
</div>

＆＃13;

Answer 2

我发现，至少在Google Chrome浏览器中，您需要将容器的CSS height属性的值设置为 other 而非“ auto”的值。如果在CSS文件中为容器的高度设置了显式值（例如200px或60％），则在确定相对高度偏移时，浏览器将使用预先计算的值。使用“自动”设置，在渲染页面之前，不会明确知道容器的高度，因此无法计算相对运动，在这种情况下，HTML渲染器只会忽略必需的CSS声明。例如，当您依靠'auto'来调整DIV元素的大小时，这变得非常烦人，例如，在渲染该元素之前，您不知道其高度，但随后发现该DIV中相对定位的元素却没有指示他们不要垂直移动。

目前，我还不知道一种解决方案-至少不是一个与旧版浏览器向后兼容的解决方案。尽管我怀疑最近增加了CSS变量（截至2018年6月）可能为支持该功能的现代浏览器提供了一个变量。但是，我尚未对此进行测试，即使CSS变量为现代浏览器提供了解决方案，仍然存在支持较旧浏览器的问题。

您在这里遇到的是HTML世界中的一个基本障碍。在渲染之前没有在CSS中设置显式尺寸的元素，在渲染之前没有已知的尺寸。至少，这是我在解决此问题的同时，弄清响应HTML / CSS的细节的看法。

但是，如果您要尝试相对于先前渲染的包含文本的元素垂直对齐元素，则元素的字体大小将提供一种执行所述对齐的方法。因为最正确构造的CSS文件会为整个页面指定字体参数，并且一旦设置了这些字体参数，以相应字体呈现的元素便具有已知的垂直尺寸。将单位从容器高度的百分比更改为em可以很巧妙地解决此问题，至少在我自己的代码中可以解决。 em单位基于适用于您元素的字体尺寸，因此，一旦使用“ 1.2em”或类似形式的名称设置了字体参数，就可以执行垂直移动而无需知道容器的大小。 / p>

尽管我收集的一种方法在专业圈子中非常，但除非被迫这样做，否则它在专业圈子中是不受欢迎的，它是使用JavaScript确定有问题的指标，并通过算法重新调整元素。但是，无论如何，CSS应该在合理的范围内代表您这样做，但是不幸的是，这些限制之一是基于这样一个事实，即未渲染的非文本元素在其直到之间没有明确定义的高度被渲染。

另外请注意，基于字体大小的对齐方式有两种可能：em用于基于直接适用于您的元素或其直接容器的字体度量进行渲染，以及rem用于基于字体的根元素的字体度量进行渲染。 HTML文档。

元素不从顶部移动

2 个答案: