recherche

Maison  >  Questions et réponses  >  le corps du texte

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

Positionner le div partagé comme indiqué ci-dessus était un défi pour moi. Eh bien, j'ai essayé positionabsolutebottomleft 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>

P粉009186469P粉009186469230 Il y a quelques jours459

répondre à tous(1)je répondrai

  • P粉156983446

    P粉1569834462024-04-02 00:45:15

    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.

    répondre
    0
  • Annulerrépondre