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