Position and display confusion

HTML-CSS
1

Hi all, I’ll keep it short . Here’s my code:

<!DOCTYPE html>

<html>
<head>
    <title>Page title </title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <section>
		<img src="cat0.jpg" alt="" width="50px" height="50px"/>
		<img src="cat1.jpg" alt="" width="50px" height="50px"/>
    </section>
    <br><br> 
	<section>
		<div > left</div>
		<div > middle one</div>
		<div > right</div>
    </section>
    <section class="box">
	    
	</section>


</body>
</html>

*{
	margin:0;
	border:0;
	padding:0;
	
}
img {
	display: block;
}

div {
	display: inline;
	background-color: yellow;
}

.box {
	display: inline-block;
	position: relative;
	background-color:pink; 
	width: 20%;          
	height: 400%;
}

I was confused about how display and position relate to each other when used together and watched this very helpful video on the topic:

and according to this video if an element is set to position relative and display block, it should be possible to adjust with width/height settings. The box div only is visible if I use position absolute though?

I even tried removing the ‘excess code’ and just left the div box html and css code, and it’s still only visible with absolute.

I tried adding position: relative to a parent element and then the box div is not visible whether it’s set to absolute or relative. I thought if a parent element is set to relative and a child element to absolute than the child element is positioned absolute relative to that parent element at least.

I’m completely lost atm.
Thanks for any help.

2

Relative shows if you put some content in it. For instance if you add text inside the section with class “.box”, but I’m not sure what you are looking for otherwise.

3

Thank you :slight_smile: Now it works like I expected. I just didn’t see the pink box show when I expected and this simple detail that relative needs content wasn’t mentioned anywhere :slight_smile:

4

Hello, I’m having another problem with this. Though it’s more general css related.
A parent element is set to position: relative, display: block . Then shouldn’t the child elements inherit this by default?

<main class="parent">
   <div class="child"></div>
</main>

.parent {  position: relative , display :block ; }
.child {  /* should inherit everything from .parent */ }

But it’s not working like that for me. I have to add the same
position: relative , display :block to the child css or else in .child left: 100px; is ignored?

Thanks for any help !

5

Thanks, I figured this out now, no need to reply to this anymore . :slight_smile: