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

it's not related to this

Mannix•12mo ago

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

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

which position ? relative or absolute ?

Mannix•12mo ago

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

BismuthOP•12mo ago

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

Jochem•12mo ago

the second link I shared has a lot of info

BismuthOP•12mo ago

okay thanks

Gaming

Programming

Why this border is filling whole screen ?