Kevin Powell - Community•11mo ago

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%;
  }

10 Replies

BismuthOP•11mo 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•11mo 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

BismuthOP•11mo ago

it's not related to this

Mannix•11mo ago

because if you remove the position body becomes the containing block for your after

Jochem•11mo 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

BismuthOP•11mo ago

which position ? relative or absolute ?

Mannix•11mo ago

relative position absolute always looks for first instance of position relative if there isn't one body becomes the containing element

BismuthOP•11mo ago

I didn't understand. Could you please elaborate? or give me some resource to study more about this

Jochem•11mo ago

the second link I shared has a lot of info

BismuthOP•11mo ago

okay thanks

Gaming

Programming

Why this border is filling whole screen ?