CSS (III)

still on display & positioning continuing from the previous post the next on the list are:

sticky

z-index

inline display

float

clear

sticky

the sticky value is another position value that sticks to a specified part of the page, as the user scrolls the content remains visible till it reaches the bottom of the page.

.head{
 position: sticky;
 top: 240px;
 border: 13px;
}

z-index

this property specifies the stack order of elements over each other either to be placed in front, or behind the others. an element can have a positive or negative integer stack order.

.img-black{ regardless of their size whil esome 
 position: absolute;
 left: 0px;
 top: 0px;
 z-index: 1;
}

.green-box{
 font-family: san-serif;
 background-color: blue;
 z-index: 2;
 border-radius: 3px;
}

due to the { img } having an index of 1, it will be placed behind the green-box.

inline display

some elements fill the entire browser from left to right regardless of their size and some elements take as much space as they require and can share horizontal spaces with other elements, the three values used to change the display of elements are:

Get Cyril’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

inline

block

inline block

inline — inline elements have a box wraps tightly around their content and takes the amount of space necessary sharing horizontal space with other elements, the width and height can't be altered with CSS properties, this ability helps to make an element with other display properties as default into inline if necessary. some examples of inline elements are the likes of <em>| <strong> | <a>

h1{
 display: inline;
}

block — these elements do not share the same horizontal line or width with other elements by default, some block-level elements include { <h1> to <h6> | <p> | <div> }

.strong{
 display: block;
}

inline-block — this feature combines both inline and block value, inline-block elements can appear next to each other and can alter their dimensions { width and height}.

.rectangle{
 diaplay: inline-block;
}

float — if you're interested in moving elements to extreme corners of a page you can use the float value, its commonly used to wrap text around an image, when using float the width must be specified to prevent assuming the full width of the container.

.banner{
 float; left;
 background-color: orange;
}

clear —the clear element dictates how elements should behave when clustering or bumping each other on the page when multiple elements prevent each other from moving properly.

.special{
 clear: left;
}

it can only take one of the following properties:

left: the left side of the element will not touch any other element within the same containing element.

right: the right side of the element will not touch any other element in the same containing element.

both: neither side of the element will touch each other in the same containing element.

none: the element can touch either side.