CSS Position Property

CSS Position Property

CSS Position Property

CSS Position property | CSS Position - Easy explanation

 

CSS (or Cascading Style Sheets) is a style sheet that adds style to a document written in a markup language, such as HTML. Understanding how CSS influences on-page alignment can help you enhance your design abilities as well as the overall user experience of your webpage.

In this article, we will discuss what is position property in CSS and how it works to improve the site’s User Interface.

What is CSS Position Property?

The CSS position property specifies the location of an element in an HTML document. The final position of an element is determined by the top, right, bottom, and left properties.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

These properties set the position of an element according to the value of the position property. The position property in CSS takes the following values:

  1. Static
  2. Relative
  3. Absolute
  4. Fixed
  5. Sticky

Position Static css:-

It is the default positioning of every HTML element. It adjusts the position in accordance with the natural flow of the page. It is unaffected by the top, bottom, left, and right properties.

Position Relative css:-

In relative positioning, the element follows the natural flow of the page but is positioned relative to its initial position. The shift in the final position of the element is governed by the value of offsets. The offset values are set using top, right, bottom, and left properties.

50+ HTML, CSS & JavaScript Projects With Source Code

The content around this element adjusts for extra spacing that occurs due to its relative positioning.

Position Fixed in css:-

In fixed positioning, the element leaves the natural flow of the page. Instead, it is positioned relative to the screen’s viewport. The position of a fixed element is adjusted using the top, right, bottom, and left properties.
A fixed element is rigid in terms of location, meaning it does not move regardless of how the page is scrolled up and down.
Unlike relative positioning, there is no space left where the element would have been located in the page layout.

Position Absolute in css:-

In absolute positioning, the element ignores the regular document flow, but unlike fixed positioning, the element is positioned relative to the nearest positioned ancestor.

A positioned element has property value relative, fixed, absolute, or sticky.

If the element has no positioned ancestor, the element is positioned relative to its containing block and moves with scrolling.

Position: sticky

Sticky positioning is a combination of relative positioning and fixed positioning.

A sticky element toggles between relative and fixed, depending on the position of the scroll. It is relative until an offset position is met in the viewport.

Portfolio Website using HTML and CSS (Source Code)

Example Of CSS Position Property

we add all CSS Position Property Div so you can see below which CSS Position Property Work and What Code Write for this.we add static div much time to create a scroll bar so you scroll and see how Fixed Position Property Work.

HTML Code

ADVERTISEMENT

<div class="box box1">
  position: static
</div>
<div class="box box2">
  position: relative
</div>
<div class="box box3">
  position: absolute
</div>
<div class="box box4">
  position: fixed
</div>
<div class="box box1">
  position: static
</div>
<div class="box box1">
  position: static
</div>
<div class="box box1">
  position: static
</div>
<div class="box box1">
  position: static
</div>
<div class="box box1">
  position: static
</div>
<div class="box box1">
  position: static
</div>
<div class="box box1">
  position: static
</div>
<div class="box box1">
  position: static
</div>
<div class="box box1">
  position: static
</div>

Css Code

ADVERTISEMENT

.box{
  width: 200px;
  height: 100px;
  background-color: #ccc;
  border: 2px solid #555;
  text-align: center;
  line-height: 100px;
  margin-bottom: 10px;
}

.box1{
  position: static;
}

.box2{
  position: relative;
  top: 20px;
  left: 100px;
}

.box3{
  position: absolute;
  right: 0;
  top: 10px;
}

.box4{
  position: fixed;
  left: 300px;
  top: 10px;
}

Final Output….

Z-index in css

ADVERTISEMENT

While placing our elements on a webpage, sometimes there are cases where elements overlap. By default, the newer element will appear on top, which may cause disturbance to our design.

ADVERTISEMENT

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

ADVERTISEMENT

In those cases, we can use the z-index property to specify which element should be on top of the others. In other words, the z-index specifies the stacking order of the overlapping elements.

Z-index can have both positive and negative stack values. A higher stack order element will appear in front of a lower stack order element.

Fixed, absolute, and sticky positioning are stacked by default. All position values except static can be stacked.

written by @ankit Joshi



Leave a Reply