Why this border is filling whole screen ?

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="grid.css">
</head>

<body>

<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>

</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="grid.css">
</head>

<body>

<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>

</body>

</html>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
background: hsl(210deg 30% 12%);
}
.parent {
--padding: 4px;
position: relative;
padding: var(--padding);
border: 1px solid hsl(210deg 10% 40%);
border-radius: 8px;
width: 450px;
margin: 4rem;
}
.parent::after {
content: '';
position: absolute;
top: 2px;
bottom: 2px;
left: calc(
25% +
var(--padding) / 2 -
1px
);
border-left:
2px dashed
hsl(210deg 8% 50%);
}
.child {
display: grid;
place-content: center;
height: 100px;
border:
2px solid hsl(210deg 8% 50%);
border-radius: 3px;
background: hsl(210deg 15% 20%);
color: white;
font-size: 1.325rem;
font-weight: bold;
}
.child:first-child {
margin-right: 2px;
}
.child:last-child {
margin-left: 2px;
}

.parent {
display: grid;
grid-template-columns: 25% 75%;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
background: hsl(210deg 30% 12%);
}
.parent {
--padding: 4px;
position: relative;
padding: var(--padding);
border: 1px solid hsl(210deg 10% 40%);
border-radius: 8px;
width: 450px;
margin: 4rem;
}
.parent::after {
content: '';
position: absolute;
top: 2px;
bottom: 2px;
left: calc(
25% +
var(--padding) / 2 -
1px
);
border-left:
2px dashed
hsl(210deg 8% 50%);
}
.child {
display: grid;
place-content: center;
height: 100px;
border:
2px solid hsl(210deg 8% 50%);
border-radius: 3px;
background: hsl(210deg 15% 20%);
color: white;
font-size: 1.325rem;
font-weight: bold;
}
.child:first-child {
margin-right: 2px;
}
.child:last-child {
margin-left: 2px;
}

.parent {
display: grid;
grid-template-columns: 25% 75%;
}
No description
10 Replies
Bismuth
Bismuth10mo ago
If I remove position: relative; from .parent, the border fills the entire screen. I wanna understand this css, why removing both position:relative from .parent and position:absolute from .parent::after makes this border invisible ?
Jochem
Jochem10mo ago
I don't have time to look into it, but that's probably to do with stacking contexts: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
Bismuth
Bismuth10mo ago
it's not related to this
Mannix
Mannix10mo ago
because if you remove the position body becomes the containing block for your after
Jochem
Jochem10mo ago
Good call Mannix. That's the one I meant yeah https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block. Serves me right for looking too quickly
Bismuth
Bismuth10mo ago
which position ? relative or absolute ?
Mannix
Mannix10mo ago
relative position absolute always looks for first instance of position relative if there isn't one body becomes the containing element
Bismuth
Bismuth10mo ago
I didn't understand. Could you please elaborate? or give me some resource to study more about this
Jochem
Jochem10mo ago
the second link I shared has a lot of info
Bismuth
Bismuth10mo ago
okay thanks
Want results from more Discord servers?
Add your server