cari

Rumah  >  Soal Jawab  >  teks badan

Tajuk semula: meletakkan div di atas div lain melalui kedudukan

Meletakkan div kongsi seperti yang ditunjukkan di atas merupakan satu cabaran bagi saya. Baik saya cuba positionabsolutebottomleft melaraskan px yang sangat mengecewakan tetapi output sentiasa disusun di atas atau bawah. Bagaimanakah saya boleh mencapai output yang serupa dengan yang dalam gambar?

: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 hari yang lalu455

membalas semua(1)saya akan balas

  • P粉156983446

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

    Saya membuat beberapa perubahan pada kod dan menggunakan absolute untuk membuat pop timbul kelihatan.

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

    balas
    0
  • Batalbalas