Learning CSS Series

Part -5 Some important CSS concepts and CSS positioning

Now that we have dived deep into CSS, let us explore some cool concepts that can help you out traversing your webpage.

RGB vs RGBA

The RGB in color defines a relationship between the red, green and blue color values which when combined can give us any combined color lying in their spectrum.

The A in RGBA on the other hand defines the alpha value which helps us in identifying the transparency of the color.

E.g.

.demo{
color: rgb(255, 222, 233);

}

.demo2{
color: rgba(255, 222, 233,0.5);

}

Focus selector

The :focus selector selects the element currently in focus.
It is very useful in giving certain text fields a focussed outline or styling whenever a text is to be inserted in these.

E.g.

.demo:focus{
outline: 1px solid #000
}

If the above selector is applied to a button, when clicked, it will display a black border along its edges.

E.g of focus selector, the black border next to the button CHOOSE PLAN

Float

The float property is generally used when we want to reposition the content over our page.

It can take the values of right, left, none, inherit.

The float is a great selector which can help in easier repositioning of elements over screen.

e.g.

img {
float: right;
}

The above would position the image to move to right.

However Float is not ideal for moving elements on page as it would move the elements out of the div, with float being an out of flo element.

CSS Positioning

Under Positioning we will cover the following:

1. Understanding the “position” property.

2. Fixed Navigation Bars with “fixed”.

3. Positioning Elements with “z” index.

4. Using “absolute” and “relative” Stand Alone and Combined.

5. “Sticky” Positioning.

6. The “Stacking Context”.

Positioning

The position property is applied by default to all the elements of our document.

Let’s take the following Block of elements.

As we can see, by default when we place an element right after another, the position property is applied to it to maintain the document flow.

Here specifically the “position:static” property is applied.

There might be now cases that we would want to re-position our elements.

E.g.

We could want the first div to be configured on the upper right hand side.
We could want the second div to be placed at the top left of the body.
We could want the third div to remain the same.

This can be achieved through positioning.

For this to work we can apply some property to the “position” selector such as absolute, relative, fixed and sticky. Out of these sticky is a new property and not supported by all browsers.

Now for the position property to work, we also need to understand how the elements will move on our website.

Consider the following web document. Here we want to change the position of the first div.

Here now the div can move to 4 directions, top, right, bottom, left.

Let’s say that we change top to 20 px. Now this could mean any of the following:

Move the div element from its position up to 20px. That means that the element is being moved only from its own current position.
Move the div element 20px relative to the viewport, the html, the body etc.. Here we are moving the div element based on a relative position and hence the positioning context changes.

Note: Viewport is simply the visible part/area of your web page. We can translate it with “your browser window”

Fixed Navigation Bars with “fixed”

The property fixed for position is a lot suitable for configuring sticky nav bars.

We can fix the nav bars to top, bottom etc. depending on the requirements.

The fixed property will do two things:

Take the element out of the document flow.
Make the elements position fixed to the viewport context.

E.g.

Consider the main-header class to be the parent class of the navbar.

Now to make the nav sticky and configured to the top, we can simply do the following:

.main-header {
width: 100%;
background: #2ddf5c;
padding: 8px 16px;
position: fixed;
}

Primitively the position attribute can be used to configure or place the image at the background of the page.

For that, just place a div at the top level on your page with a class, like background.

For CSS, we can simply do something like:

.background{
background: url(“../images/plans-background.jpg”);
width:100%;
height:100%;
position:fixed;
}

Here we can see that we made the image to fit the entire viewport by changing its height and width.
Also we changed the position to fixed, so that it may move out of the document flow, to occupy the entire viewport.

But the problem here is that our image won’t come in background automatically. It will be displayed above all the elements.
We can change this by configuring our z-index property!

Z-index

In real world we have 3 dimension on three axis.
The X, Y and Z axis.

While X determines width and Y determines height, the Z-index determines your 3rd dimension of depth.

Same is the case for web pages as well, where z-axis or z index will determine the depth here.

By default z-index is set to auto, which in turn is 0 for all elements of a document.

For z-index to work, we necessarily need the position property. This ensures that the elements can move in and out of document flow.

An example of above could be as follows:

.background{
background: url(“../images/plans-background.jpg”);
width:100%;
height:100%;
position:fixed;
z-index: -1;
}

Here we can see that the -1 value is applied to the z-index, which signifies that we need to move the background image, below all other elements .

Using “absolute” and “relative” Stand Alone and Combined.

Absolute just like fixed is a position value that can be used.

It unlike fixed behaves differently in different situations and is not always confined to being fixed according to the viewport.

If the position: absolute is applied on an element where the parent element does not have a position property, it will simply be fixed according to the html selector.

E.g

Before Scrolling

After Scrolling

Here the badge recommended has the following CSS:

.package__badge{
top: 52px;
position: absolute;
left: 900px;
}

According to this, it is aligned 52px from the top and 900 px from the left.
Interestingly its position is absolute, which means the parent element it is attached to (here being the plus plan div) also occupies the same and is hence configured to the html.

This creates a problem as shown while we scroll as shown.

Since the entire div now moves absolute to HTML, we can see that it distorts the UI. This is due to the fact that earlier we configured the nav to be fixed according to the viewport and so it won’t move.

Now how do we fix this?

This is where the position:relative comes into place.

Let’s say that we now want the Recommended badge to be place relative not to the HTML page, but its parent div. Here are the steps we will follow then:
1) In the parent div CSS class we will apply a position:relative property.

2) In the child div CSS class, i.e. the badge, we will keep the position:absolute property.

3) In the parent div CSS class, we will further move it back in stack with z-index:-1;

4) Now we change the top and left to make sure that the alignment is correct.

When we apply position:relative to the parent class, we essentially make its child absolute configurations be relative to only the parent. Thus it fixes the UI distortion.

We move the page back an index in z-index for the scroll view to remain aligned with our nav.

E.g. code:

package{
width:80%;
margin: 56px 0;
border:4px solid #0e4f1f;
border-left: none;
position: relative;
z-index: -1;

}

.package__badge{
top: 2px;
left: 0;
position: absolute;
left: 900px;
}

E.g. Website before Scrolling

E.g. Website after scrolling (Notice how the UI is fixed now)

Sticky Positioning

The sticky positioning can be thought of as a hybrid between the relative and fixed positioning.

The element with the position set to sticky will be positioned based on the user’s scroll position.

It toggles between the relative and fixed position. If the element is not being scrolled or the viewport hasn’t reached an offset it will behave like a relative element positioning.

If the given offset position has been met in the viewport, then the element sticks in place like the position fixed.

This is a useful property in a use case like displaying headings of a section in a fixed position before scrolling to the next.

The Stacking Context

Let us understand the stacking context with the help of the above example.

If we apply the position fixed to all the main containers: Navigation, headline and contact-us,

then we can modify their z-index.

With this, each container will contain its own z-index.

i.e. a z-index of 100 on contact-us will always be higher than any index on the children of headline (image-1, image-2 and image-3), if headline has a lower index than contact-us.

E.g

.contact_us{
position:fixed;
z-index:100;

}

.headline{
position:fixed;
z-index:1;
}
.image1{
position:fixed;
}

.image2{
Position:fixed;
z-index:1000;
}

.image3{
position:fixed;
}

Using the above styling, we can see that the z-index of image2 is much higher than the contact us z-index. Even so, it will always be placed lower in the stack of rendering elements as the parent element of image2.

As seen above the stack of images always remains lower than contact-us as the headline has a lower z-index than contact-us.

This is how stacking works in CSS.

Summary

We can summarise the positioning as below:

So we now know a positioning and a few more concepts in CSS. In the next blog of the “Learning CSS” series, we will be diving a bit deeper to understand some more concepts that we need to be familiar with while implementing CSS!

Hope you like this series and stay tuned for more content on the learning.