Umbenennen: Platzieren eines Div über einem anderen Div durch Positionierung

Question

Die gemeinsame Positionierung wie oben gezeigt war für mich eine Herausforderung. Nun, ich habe versucht positionabsolute 与 bottom 和 left, die Pixel anzupassen, was sehr frustrierend war, aber die Ausgabe wird immer oben oder unten gestapelt. Wie kann ich eine ähnliche Ausgabe wie auf dem Bild erzielen?

: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>

Answer 1

我对代码进行了一些更改，并使用 absolute 使弹出窗口可见。

: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.
      
    
    

      

        
      
      

        
Michelle Appleton
        
28 Jun 2020
      
      

        

          
        
        

          Share