Kevin Powell - Community•5mo 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

Bismuth•5mo 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•5mo 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•5mo ago

it's not related to this

Mannix•5mo ago

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

Jochem•5mo 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•5mo ago

which position ? relative or absolute ?

Mannix•5mo ago

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

Bismuth•5mo ago

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

Jochem•5mo ago

the second link I shared has a lot of info

Bismuth•5mo ago

okay thanks

Gaming

Programming

Why this border is filling whole screen ?