Re-titre : placer un div au-dessus d'un autre div via le positionnement

Question

Positionner le div partagé comme indiqué ci-dessus était un défi pour moi. Eh bien, j'ai essayé positionabsolute 与 bottom 和 left d'ajuster les px, ce qui était très frustrant mais la sortie est toujours empilée en haut ou en bas. Comment puis-je obtenir un résultat similaire à celui de l’image ?

: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

J'ai apporté quelques modifications au code et utilisé absolute pour rendre la popup visible.

: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