Web Development

Position Elements

Position Elements
Written by Sandeep Likhar

Position Elements is the section 17 of Beginner’s Guide to CSS.

The order of your elements in the HTML code is not always the order it appears on web browser. By using the positioning properties in CSS you can change the appearance where ever you write the code of the element.

The CSS positioning properties allow you to position an element. It can also place an element behind one another. Also it specify what would happen when and element’s content is too big.

There are four different positioning methods in CSS.

  • Static Positioning
  • Fixed Positioning
  • Relative Positioning
  • Absolute Positioning

After setting the appropriate position property, you need to specify the positioning sides top, bottom, left and right properties. The positioning sides will not work unless the position property is set first. Above four methods decide how it will effect the side positioning. Let’s look at each of the above positioning methods.

Static Positioning

This is the default position of any HTML element. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties.

Fixed Positioning

An element with fixed position is positioned relative to the browser window. Which means it will not move even if the window is scrolled vertically or horizontally. So fixed positioned elements can overlap other elements. Because the HTML document and other elements behave like the fixed positioned element does not exist. It’s like fixed positioned elements are removed from the normal flow. In this web page you might have seen a red color paragraph which makes you nuts. A paragraph even the scroll cannot control. That is because that paragraph has a fixed positioning. 430 pixels from the top of the browser and 758 pixels from the right of the browser. Always stay on that position. See the code snippet, how it was done.

You might see this paragraph make nuisance of you. Even the scrolling cannot control this. That is because this element have a fixed position style.

[code langauge=”css”] p {
position: fixed;
top: 430px;
color: red;
}
[/code]

Relative Positioning

A relative positioned element is positioned relative to its normal position. If we take a header element, that element has a normal position by default. Look at the following example.

This is a normal Header

This Header moved left by 20px from it’s normal position

This Header moved right by 20px from it’s normal position

This Header moved up by 40px from it’s normal position

The Normal position space is still reserved for the element. See the last header item. Normal space is still there until this paragraph have a style to overlap it.

Absolute Positioning

An absolute position element is positioned relative to the first parent element that has a position other than static. Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist. Absolutely positioned elements can overlap other elements. This positioning takes the values regard to the top, left, bottom and right of the page. So not like the fixed positioning it can control by the scrolling.

 

Overlapping Control

When using different positioning, sometimes elements can be overlap with each other and can make a mess because some elements which are more important may cover to other elements. To overcome this we can define what should infront and what should go behind. The z-index property specifies the stack order of an element. An element can have a positive or negative stack order. An element with greater stack order is always in front of an element with a lower stack order. If you forget to define the index, the element positioned last in the HTML code will be shown on top in the browser.

Let’s put some text on a image to demonstrate this.

This is a heading

Airbender

Without no index property your text content go behind the image as image element is second in the flow.

Let’s tryout some wonderful stuff using other properties related to positioning.

Having Scroll feature

This division tag has a vertical and horizontal scroll bars
[code language=”css”] div{
overflow:scroll;
}
[/code]

The overflow property specifies what to do if the content of an element exceeds the size of the element’s box. If you use the property value as ‘hidden’ then the scroll bars will not appear and the reader will not be able to see your whole content in the element.

If you use property value as ‘auto’, The overflow property decides what to do if the content inside an element exceeds the given width and height properties. see the same example with value auto. Your horizontal scroll bar will disappear because it doesn’t needed in here.

This division tag has a vertical and horizontal scroll bars

In this section we came across positioning properties of CSS. And we did wonderful tricks using them; Hide some elements and show some out. In the next section we are going to discuss about floating ships.

WHAT’S NEXT?

Let’s learn how to Float Elements on CSS Water.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW