What is CSS Position? What is Display Properties?
CSS Position:
This is property of CSS that decides how an Element targeted by a CSS Class, ID or HTML Tag is position in the overall HTML Document/ Page.
According to Mozilla Developer Network (MDN) The position CSS property sets how an element is positioned in a document, using one of the following properties: static, relative, absolute, fixed and sticky followed by the top, right, bottom, left and z-index secondary properties which determine
the final location of positioned elements.
This simply means that to position an element in CSS, we just need to first, target the HTML Element we wish to add the “position” property to add a style tag to it by way of adding a class or Id key to it or just its HTML name would do. NB: this would cause all other tags with the same name to by positioned also, hence we use a CSS tag to target the element and then add the style declaration “Position” to the element and set it to one of the following attributes position: static;position: relative;position: absolute;position: fixed;position: sticky; Finally set it to any the following attributes: - Top, right, bottom or left to set what position or location on the HTML page/Document it would stay at.
Now what do those attributes do?
Attributes:
Static: This is the default setting for HTML elements which states that the follow the normal flow of the HTML Document (Page) and in this state the “Top, bottom, left, right and z-index properties” do not have any effect whatsoever on the element position.
. element {
position: static;
}
Relative: This property works like a static property as it is positioned according to the normal flow of the HTML document and it does not affect the flow of other Elements, however, when a secondary property such as “top, bottom, right or left” is applied to the element it is positioned relative to its initial position I.e., it moves to another position based on the distance of where it was initially located.
. element {
position: relative;
top: 40px;
left: 40px;
}
Absolute: This property removes the Element from the normal flow of the document, meaning that the document provides no space for the element and it is positioned relative to a positioned ancestor element or parent container. For example, when the element is within another and that element is positioned with the relative, absolute, sticky, or fixed property then the element automatically calculates its position from that positioned parent. Else, it keeps looking upward through the ancestor chain until it finds one that is positioned and if it does not find, then it is positioned relative to the containing block which in this case may be the body of the HTML document.
. element {
position: absolute;
top: 40px;
left: 40px;
}
Fixed: this position property works exactly like position absolute; however, it takes its position from the position of the containing element depending the element’s position on the viewport and remains so and does not scroll with the rest of the HTML document. Consequently, it can be used to make navigation bars that remains fixed to the viewport and allows the user reach it when needed.
. element {
position: fixed;
}
Sticky: This property makes the element move normally with normal flow of the document however, when it is positioned with a secondary attribute like top, left, bottom or right it becomes positioned based on a scrolling parent or ancestor.
. element {
position: -web-kit-sticky;
position: sticky;
top: 40px;
}
Display Properties:
The CSS display Property is a key property of CSS that is used in the layout of HTML Elements, this particular property alongside other CSS Properties aid in the effective layout of HTML Elements without which it would a challenging time trying to create proper layouts for HTML Documents.
CSS Display Properties are numerous but there three(3) major Properties that account for the bulk of layout uses namely: Block, Flex and Grid. Consequently, the rest of the properties are achieved by combining a mixture of the main three (3) display properties. The Display Properties are attached to a HTML Document using the following syntax:
block:
display: block;
display: inline;
display: inline-block;
Block-attribute:
Setting the display property of the element to block creates a type of block a round the element which makes other elements around it go down to next line, in order words the element generates a block element box, generating line breaks both before and after the element when in the normal flow.
Inline-attribute:
This attribute causes the element to allow other elements stay beside it. In order words, the element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space
Note: Browsers that support the two-value syntax, on finding the outer value only, such as when display: block or display: inline is specified, will set the inner value to flow. This will result in expected behaviour; for example, if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout. According to MDN(Mozilla developer Network)
Flex:
display: flex;
display: inline-flex;
When the element gets the Display property it makes the element into a block element and its children following certain attributes namely:
justify-content
align-content
align-items
align-self
place-content
place-items
row-gap
column-gap
gap
The element behaves like a block element and lays out its content according to the flexbox model.
CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.
Syntactically,
. box {
display: flex;
justify-content: space-between;
}
Grid:
display: grid;
display: inline-grid;
display: flow-root;
The element behaves like a block element and lays out its content according to the grid model.
A grid is a set of intersecting horizontal and vertical lines defining columns and rows. Elements can be placed onto the grid within these column and row lines. CSS grid layout has the following features:
. wrapper {
display: grid;
grid-template-columns: 200px 200px 200px;
}
This makes the wrapper container divide into 3 columns of 200px in size.
Top comments (0)