(Frontend_6) CSS Relative & Absolute

Relative

Create items within unordered list:

ul>li*50.item${$}

with CSS

li{
display: inline-block;
width: 100px;
height: 100px;
background-color: #aaa;
}

and reseter

<link rel="stylesheet" href="reset.css">

Then the layout would be

However, the characteristic of inline-block , means the items are block in the line; as a result, there would be space in between the blocks in the line. To solve this problem, we can specify font-size: 0px in ul and any font-sizein li . Then the layout:

Add margin to the blocks

Position

For example if we want the 20th block to be on right hand side relatively to other blocks, then we add CSS to .item20 with .position: relative and left: 50px . The meaning of this CSS setting is how relatively it is going to be to the wrapper on the lower layer.

.item20 {
background-color: #f00;
position: relative;
left: 50px;
opacity: 0.5;
}

Notice, the concept of relative is how relatively shift from original position; for example, if we change the total width of the layout, then

Cover (z-index)

In the above layout, if we remove opacity: 0.5

As you can see, the one (item20) with .position: relative cover item21. What if we want item21 to cover item20? we can specify z-index: 1 as follow:

.item21 {
position: relative;
z-index: 1;
}

Then the layout would be

Absolute

Create following divisions

<div class="a"> a
<div class="b"> b
<div class="c"> c
</div>
</div>
</div>

with CSS

div{
padding: 40px;
border: 6px solid #f00;
font-size: 24px;
}

and add multiple paragraph to extend the <body>

p*30>lorem

Then the layout would be

The abstract concept: the object with absolute will be positioned relatively to the object with relative only once.

We add CSS to c:

.c {
position: absolute;
border: 6px solid #aaa;
}

Then the layout would be

As you can see, it looks like c being placed on the topper layer of any other objects in the layout and <div class="b"> cannot capture it.

If we set the position of b as relative:

.b {
position: relative;
}

and specify the position of c:

.c {
position: absolute;
border: 6px solid #aaa;
top: 0px;
left: 0px;
}

Then the layout would be

c is now on the left and top of b.

The objects with position setting will be put on upper layer once. And then how these objects being positioned is determined by the position setting of CSS; for example, position: relative means it is going to be placed relatively to the wrapper on the lower layer. position: absolute means it is going to be placed absolutely to the wrapper on the lower layer and because the wrapper is still on the lower layer, the object with position: absolute will be positioned absolutely to any object on the lower layer, meaning it is going to be on the most left and most right position of the layout if we specify

.c {
position: absolute;
border: 6px solid #aaa;
top: 0px;
left: 0px;
}

only

and without

.b {
position: relative;
}

And the layout would be

Once we add

.b {
position: relative;
}

Then b will be position on the upper layer, which is the same as c; as a result, c will be position absolutely to any object on the lower layer but not b which is on the upper layer, so the layout would be

As you can see, c now is placed on the left and top of b at most.

If we want c to be placed relatively to a, we can specify

.a {
position: relative;
}

The effect is only once; for example, if we specify position: absolute to a without position: relative to its wrapper, then the layout would be

Once we scroll down the web page, c would not move accordingly (because it only set once).

Suppose we have following setting, a wrap with three items with image, title, description

<div class="wrap">
<div class="item">
<img src="https://picsum.photos/300/200/?/random=1" alt="">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Id laborum sit, ipsam ea distinctio, voluptates est, officia temporibus molestiae totam illo, deserunt. Aliquid iste odit, dolores odio quos libero laudantium.</p>
</div>
<div class="item">
<img src="https://picsum.photos/300/200/?/random=2" alt="">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, sed! Nemo quae, impedit velit fugit placeat corrupti expedita nam quisquam, atque. Placeat, exercitationem! Optio dolor expedita alias soluta at, laborum.</p>
</div>
<div class="item">
<img src="https://picsum.photos/300/200/?/random=3" alt="">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores nihil officiis, distinctio illum itaque alias suscipit tempora quibusdam! Ab delectus corporis eos impedit aperiam quisquam illum vel porro consequuntur dolorem!</p>
</div>
</div>

and the CSS

.wrap{
width: 960px;
display: flex;
margin: auto;
}

Then the layout would be

A little bit ugly but it’s enough for demonstration. If we want to add a tag to emphasize these pictures as follow:

html:

<div class="wrap">
<div class="item">
<div class="tab">Hot</div>
<img src="https://picsum.photos/300/200/?/random=1" alt="">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Id laborum sit, ipsam ea distinctio, voluptates est, officia temporibus molestiae totam illo, deserunt. Aliquid iste odit, dolores odio quos libero laudantium.</p>
</div>
<div class="item">
<div class="tab">Hot</div>
<img src="https://picsum.photos/300/200/?/random=2" alt="">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, sed! Nemo quae, impedit velit fugit placeat corrupti expedita nam quisquam, atque. Placeat, exercitationem! Optio dolor expedita alias soluta at, laborum.</p>
</div>
<div class="item">
<div class="tab">Hot</div>
<img src="https://picsum.photos/300/200/?/random=3" alt="">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores nihil officiis, distinctio illum itaque alias suscipit tempora quibusdam! Ab delectus corporis eos impedit aperiam quisquam illum vel porro consequuntur dolorem!</p>
</div>
</div>

and CSS:

.wrap{
width: 960px;
display: flex;
margin: auto;
}
.item .tab{
background-color: red;
color: #fff;
position: absolute;
}

Then the layout

As you can see, now hot is on the upper-left of the image, which is what we want; however, if we add padding, margin, border to the items

.item {
width: 300px;
margin: 10px;
border: 1px solid #aaa;
padding: 10px;
}

Then the layout would be

Ok~ It still looks fine but what if we want the tag to be put on the outer border? The intuitive way is to set up the left and top distance to the tag as follow:

.item .tab{
background-color: red;
color: #fff;
position: absolute;
left: 0px;
top: 0px;
}

Then the layout would be

As you can see, it is on the incorrect position. With the logic above, we should add position: relative to the upper <div> as follow

.item {
width: 300px;
margin: 10px;
border: 1px solid #aaa;
padding: 10px;
position: relative;
}

Then the layout would be

Reference

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Making your Swift code more testable with Dependency Injection and Protocols

Setup your Raspberry Pi using Windows

How TO Center A Div In CSS

Understanding Run-Time Complexities

WHY WE SWITCHED TO CILIUM

CSS Overflow: Hidden not working? Check the child element.

Couple issues with HTTPS redirect ASP.NET Core

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
YCChen

YCChen

More from Medium

Phase 1 FlatIron: Arrow Functions and Ternary Operators

Paradox Pair #35: Method & Dogma

The End of the Beginning

I haven’t slept in three days.