Tajuk semula: meletakkan div di atas div lain melalui kedudukan

Question

Meletakkan div yang dikongsi seperti yang ditunjukkan dalam imej di atas adalah satu cabaran bagi saya. Baik saya cuba positionabsolute dengan bahagian bawah dan kiri melaraskan px dengan 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%);--Grayish Blue:hs

P粉156983446 · Answer

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.
      
    
    
      
        
      
      
        Michelle Appleton
        28 Jun 2020
      
      
        
          
        
        
          Share