将共享 div 定位为如上图所示对我来说是一个挑战。好吧，我尝试了 positionabsolute 与 bottom 和 left 调整 px 非常令人沮丧，但输出总是堆叠在顶部或底部。我怎样才能实现图片中类似的输出？

:root {
  --VeryDarkGrayishBlue: hsl(217, 19%, 35%);
  --DesaturatedDarkBlue: hsl(214, 17%, 51%);
  --GrayishBlue: hsl(212, 23%, 69%);
  --LightGrayishBlue: hsl(210, 46%, 95%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Manrope", sans-serif;
}

body {
  background-color: var(--GrayishBlue);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 20px;
}

.container {
  display: grid;
  grid-template-columns: 2fr 3fr;
  max-width: 1150px;
  max-height: 390px;
  margin: auto;
  background-color: white;
  overflow: hidden;
  border-radius: 0.8em;
}

.img-box {}

.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-box {
  padding: 8%;
}

.text {
  padding-bottom: 30px;
}

.title {
  color: var(--VeryDarkGrayishBlue);
  padding-bottom: 10px;
}

.subtitle {
  color: var(--GrayishBlue);
  font-size: 1.1em;
}

.writer img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.footer {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.name {
  margin-left: 12px;
}

.name h4 {
  color: var(--VeryDarkGrayishBlue);
}

.name p {
  color: var(--GrayishBlue);
}

.share {
  margin-left: auto;
}

.share-icon button {
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--LightGrayishBlue);
  cursor: pointer;
}

.share-option {
  width: 250px;
  height: 40px;
  background: var(--VeryDarkGrayishBlue);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  position: absolute;
  bottom: ;
}

<main class="container">
  <div class="img-box">
    <img src="/images/drawers.jpg" alt="" />
  </div>
  <div class="text-box">
    <div class="text">
      <h1 class="title">
        Shift the overall look and feel by adding these wonderful touches to furniture in your home
      </h1>
      <p class="subtitle">
        Ever been in a room and felt like something was missing? Perhaps it felt slightly bare and uninviting. I’ve got some simple tips to help you make any room feel complete.
      </p>
    </div>
    <div class="footer">
      <div class="writer">
        <img src="/images/avatar-michelle.jpg" alt="" />
      </div>
      <div class="name">
        <h4>Michelle Appleton</h4>
        <p>28 Jun 2020</p>
      </div>
      <div class="share">
        <div class="share-icon">
          <button><img src="/images/icon-share.svg" alt=""></button>
        </div>
        <div class="share-option hidden">
          <span>Share</span>
          <a href="#"> <img src="/images/icon-facebook.svg" alt=""> <a/>
            <a href="#"> <img src="/images/icon-pinterest.svg" alt=""> <a/>
              <a href="#"> <img src="/images/icon-twitter.svg" alt=""> <a/>
        </div>
      </div>
    </div>
  </div>
</main>

:root { --VeryDarkGrayishBlue: hsl(217, 19%, 35%); --DesaturatedDarkBlue: hsl(214, 17%, 51%); --GrayishBlue: hsl(212, 23%, 69%); --LightGrayishBlue: hsl(210, 46%, 95%); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Manrope", sans-serif; } body { background-color: var(--GrayishBlue); display: flex; flex-direction: column; min-height: 100vh; padding: 20px; } .container { display: grid; grid-template-columns: 2fr 3fr; max-width: 1150px; max-height: 390px; margin: auto; background-color: white; border-radius: 0.8em; } .container:after { display: block; content: ''; clear: both; } .img-box {} .img-box img { width: 100%; height: 100%; object-fit: cover; } .text-box { padding: 8%; } .text { padding-bottom: 30px; } .title { color: var(--VeryDarkGrayishBlue); padding-bottom: 10px; } .subtitle { color: var(--GrayishBlue); font-size: 1.1em; } .writer img { width: 50px; height: 50px; border-radius: 50%; } .footer { display: flex; flex-direction: row; align-items: center; } .name { margin-left: 12px; } .name h4 { color: var(--VeryDarkGrayishBlue); } .name p { color: var(--GrayishBlue); } .share { margin-left: auto; position: relative; padding: 20px 0 0; } .share-icon button { border: none; width: 40px; height: 40px; border-radius: 50%; background-color: var(--LightGrayishBlue); cursor: pointer; } .share-option { width: 250px; height: 40px; background: var(--VeryDarkGrayishBlue); border-radius: 10px; color: white; position: absolute; bottom: 100%; right: 50%; transform: translatex(50%); visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; } .share-option:after { top: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-top-color: var(--VeryDarkGrayishBlue); border-width: 10px; margin-left: -10px; } .share:hover .share-option { visibility: visible; opacity: 1; }

Shift the overall look and feel by adding these wonderful touches to furniture in your home

Ever been in a room and felt like something was missing? Perhaps it felt slightly bare and uninviting. I’ve got some simple tips to help you make any room feel complete.