Css 元素未从顶部移动

在父元素相对位置中，我在p元素中包含绝对位置，但当我包含“顶部”位置时，“p”元素不移动。请看下面的代码

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

---

父类

btnClass

需要一个高度

注意，

div

的宽度默认为浏览器视口，其高度由其内容或显式设置决定，因此

左：15%

有效，但

顶：20%

无效

.btnClass{
位置：相对位置；
高度：200px；
}
p{
位置：绝对位置；
最高：20%；
左：15%；
边框：1px纯红；
显示：块；
}

温室气体

父级

btnClass

需要一个高度

注意，

div

的宽度默认为浏览器视口，其高度由其内容或显式设置决定，因此

左：15%

有效，但

顶：20%

无效

.btnClass{
位置：相对位置；
高度：200px；
}
p{
位置：绝对位置；
最高：20%；
左：15%；
边框：1px纯红；
显示：块；
}

温室气体

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

目前，我还没有发现一个解决方案——至少，没有一个能够向后兼容旧浏览器的解决方案。尽管我怀疑最近添加的CSS变量（截至2018年6月）可以为支持该功能的现代浏览器提供一个。但是，我还没有对此进行测试，即使CSS变量为现代浏览器提供了一个解决方案，仍然存在支持旧浏览器的问题

在这里，您所指的是HTML世界中的一个基本块。在呈现之前没有在CSS中设置显式维度的元素，在呈现之前没有已知的大小。至少，这是我在处理这个问题时偶然发现的观察结果，同时找出了响应HTML/CSS的细节

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

另一种方法，尽管我收集的方法在专业界是非常不受欢迎的，除非你被迫这样做，那就是使用JavaScript来确定有问题的指标，并通过算法重新调整你的元素。但是CSS应该在合理的范围内代表您这样做，不幸的是，其中一个限制集中在未渲染的非文本元素在渲染之前没有定义好的高度这一事实上

---

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

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

目前，我还没有发现一个解决方案——至少，没有一个能够向后兼容旧浏览器的解决方案。尽管我怀疑最近添加的CSS变量（截至2018年6月）可以为支持该功能的现代浏览器提供一个。但是，我还没有对此进行测试，即使CSS变量为现代浏览器提供了一个解决方案，仍然存在支持旧浏览器的问题

在这里，您所指的是HTML世界中的一个基本块。在呈现之前没有在CSS中设置显式维度的元素，在呈现之前没有已知的大小。至少，这是我在处理这个问题时偶然发现的观察结果，同时找出了响应HTML/CSS的细节

但是，如果尝试将元素与以前渲染的元素垂直对齐，请继续

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