CSS绝对定位不是移动到parent，parent是相对的

Question

我正在尝试将横向文本绝对定位在多次出现的 div 中。

每个child都有position: absolute; , 每个 parent 都有 position: relative;

    .parent{
    width: 24%;
    display: inline-block;
    float: left;
    border-left: 1px solid #FFA500;
    position: relative;
    }

    .child{
    display: inline-block;
    line-height: 1.5;
    height: 5%;
    position: absolute;
    top: 0px;
    right: 0px;
    transform: translate(0px, 100%) rotate(90deg);
    overflow: hidden;
    float: right;
}

的 child 人转到页面上完全相同的位置，这似乎是第一个 child 人 parent。结构是

Parent
    child
close
close

所有 4 divs。

有人可以帮忙吗？

Answer 1

您的身高：.child 上的 5% 可能是导致失败的原因（对我来说是这样）。那个，或者可能有其他 css 对你来说是最重要的。 Fiddle 这里：https://jsfiddle.net/tagb3yja/

.parent{
  width: 24%;
  display: inline-block;
  float: left;
  border-left: 1px solid #FFA500;
  position: relative;
  background: yellow;
}

.child{
  position: absolute;
  display: inline-block;
  line-height: 1.5;
  top: 0px;
  right: 0px;
  transform: translate(0px, 100%) rotate(90deg);
  overflow: hidden;
  float: right;
  background: silver;
}

Answer 2

在你的 css 中，如果你的父级除了绝对位置子级 div 之外没有其他内容，那么父级的高度声明为 0 - 所以你必须设置父级的高度div 以像素为单位，以便在 DOM.

中占有一席之地

CSS绝对定位不是移动到parent，parent是相对的

CSS absolute positioning is not moving to parent, the parent is relative

css

position