Why does the background property not apply only to the parent container?-CodePudding

I am making a university website from this tutorial video on [Youtube].(https://www.youtube.com/watch?v=oYRda7UtuhA&t=2686s) I have this section university campus section in my HTML When I style my layer class so as to make an orange background on my image. It is making that background on the whole page.

I don't know what is going wrong ?

Instead of spreading across the whole image, it is spreading across the whole web page. I thought the absolute position property will only apply on the 'campus-col' class

.campus-col {
  flex-basis: 32%;
  border-radius: 10px;
  margin-bottom: 30px;
  position: 30px;
  overflow: hidden;
}

.campus-col img {
  width: 100%;
}

.layer {
  background: rgba(226, 0, 0, 0.7);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

<div >
  <div >
    <img src="https://www.pngall.com/wp-content/uploads/10/London-Transparent-PNG.png">
    <div >
      <h3>LONDON</h3>
    </div>
  </div>
</div>

CodePudding user response：

if you use position: absolute without any parent that has position: relative the absolute div uses all of the document and moves along with scrolling.

You should use position: relative in the .campus-col css.

more detailed document on position

CodePudding user response：

you just need to change position:relative instead of 30px in ".campus-col"

CodePudding user response：

Your ".campus-col" has a flex-basis css property, so certify that u're adding :

display: flex;

css property in his parent ('.row') .

Also add relative position to .campus-col :

position: relative;

The element with position: absolute take absolute position inside the last relative position element , or if anyone is present , will position all along document .

Take care of default agent user styles from browser , h3 with no styles will receive default styles from browser like that :

h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

So prevent this adding a whole document selector :

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    outline: none;
    font-family: 'system-ui', sans-serif;
    font-weight: 300;
}

<!DOCTYPE html>
<html>
<head>
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    outline: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}
.row {display: flex;}

.campus-col {
    position: relative;
    flex-basis: 32%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: 30px;
    overflow: hidden;
}

.campus-col img{
    width: 100%;
}

.layer{
    background: rgba(226, 0,0,0.7);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
</style>
</head>
<body>

    <div >
        <div >
            <img src="https://www.scaler.com/topics/images/mrinal_bhattacharya.webp">
            <div >
                <h3>LONDON</h3>
            </div>              
        </div>
    </div>

</body>
</html>