父母身高和祖父母的位置

我有一個絕對位置的子元素，我的任務是使這個子元素適合父高度并相對于父邊框移動它。

這是一個例子，沒有給出父母和祖父母邊界之間的距離（填充值只是一個例子）

.grand-parent {
    position: relative;
    border: solid 2px blue;
    display: flex;
    flex-flow: column;
    width: 100px;  // this value is just an example
    height: auto;
    padding: 40px; // this value is just an example, it could be anything or changed any time
  }

  .parent {
    position: relative;
    display: inline-block;
    border: solid 2px red;
  }

  .child {
    position: absolute;
    height: 100%;
    width: 15px;
    right: 0;
    top: 0;
    transform: translateX(30px);
    background-color: #00c391;
  }
  .expected{
      transform: translateX(59px);
  }

<div style="display: flex">
  <div class="grand-parent">
    <div class="parent">
      this is a paragraph of parent element
      <div class="child"></div>
    </div>
  </div>

  <h2>Expected output</h2>

  <div class="grand-parent">
    <div class="parent">
      this is a paragraph of parent element
      <div class="child expected"></div>
    </div>
  </div>
</div>

 

請注意，父母和祖父母是回應式的，因此不能使用固定的措施

uj5u.com熱心網友回復：

從父級中洗掉position:relative，以便您的元素相對于祖父級放置，然后在父級上使用 clip-path 來剪切不需要的部分：

.grand-parent {
  position: relative;
  border: solid 2px blue;
  display: flex;
  width: 100px;
  padding: 40px;
}

.parent {
  border: solid 2px red;
  clip-path: inset(0 -999vmax 0 0); /* a big negative value for the second one */
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -2px; /* equal to the border */
  width: 15px;
  transform: translateX(100%);
  background-color: #00c391;
}

/* hover the parent to understand the trick */
.parent:hover {
  box-shadow:0 0 0 999vmax blue;
}

<h2>Expected output</h2>

<div class="grand-parent">
  <div class="parent">
    this is a paragraph of parent element
    <div class="child expected"></div>
  </div>
</div>

uj5u.com熱心網友回復：

那么只做right負數有什么問題呢？

如果grand-parent應該是回應式的，因此具有可變寬度，那么您將不得不做一些數學運算或弄清楚如何調整大小但相child對于parentgrand-parent

.grand-parent {
  position: relative;
  border: solid 2px blue;
  display: flex;
  flex-flow: column;
  width: 100px;
  height: auto;
  padding: 40px;
}

.parent {
  position: relative;
  display: inline-block;
  border: solid 2px red;
}

.child {
  position: absolute;
  height: 100%;
  width: 15px;
  right: -59px;
  top: 0;
  background-color: #00c391;
}

<div style="display: flex">
  <div class="grand-parent">
    <div class="parent">
      this is a paragraph of parent element
      <div class="child"></div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

的grand-parent高度等于parent 40px padding top 40px padding bottom的高度

因此將孩子的身高設定calc(100% - 80px)為等于父母的身高，在這種情況下，您可以position: relative從父母身上移除。現在孩子將到達邊緣，grand parent而有高度parent

      
.grand-parent {
    position: relative;
    border: solid 2px blue;
    display: flex;
    flex-flow: column;
    width: 100px;
    height: auto;
    padding: 40px;
  }

  .parent {
    display: inline-block;
    border: solid 2px red;
  }

  .child {
    position: absolute;
    height: calc(100% - 80px);
    width: 15px;
    right: 0;
    top: 50%;
    transform: translate(100%, -50%);
    background-color: #00c391;
  }

  <div style="display: flex">
    <div class="grand-parent">
        <div class="parent">
            this is a paragraph of parent element
            <div class="child"></div>
      </div>
    </div>
  </div>

 <h2>if content changes still adopt the height correctly</h2>
 <div style="display: flex">
    <div class="grand-parent">
        <div class="parent">
            this is a paragraph of parent element with extra this is a paragraph of parent element with extra this is a paragraph of parent element with extra this is a paragraph of parent element with extra this is a paragraph of parent element with extra
            <div class="child"></div>
      </div>
    </div>
  </div>

標籤：css

上一篇：如何使影像適合其內容

下一篇：在ggplot的圖例標題中添加CSS樣式