Latest updates from Cleonix Technologies
A Quicklook of CSS position

Positioning elements in web development is not so easy as it seems. Things became complicated as more elements come to the design. So, it is essential to know how to use CSS for aligning elements.
The position property specifies the type of positioning method used for an element. There are 5 main values of CSS Positions i.e.static, relative, absolute, fixed, and sticky.

Static: Static positioning is the default position for elements. They are displayed in the page where they rendered as part of normal HTML flow. Whether we declare it or not, elements are positioned in normal order on the webpage. For positioning different elements don’t have different default values, they all start out as static.

Relative: Relative positioning is the position where the element is positioned relative to its normal position. As we use relative position two things happen. One is that it introduces the ability to use z-index on that element, which doesn’t really work with statically positioned elements. Next is any child element of the relatively positioned element can be absolutely positioned within that block.

Absolute: Absolute positioning is the position where the element is positioned absolutely to its first positioned parent. That means an element with position: absolute is removed from the normal document flow. By default, it is positioned to the starting point (top-left corner) of its parent element. We can use the positioning attributes top, left, bottom. and right to set the location.

Fixed: In this case, the element is positioned related to the browser window. A fixed position element is positioned relative to the viewport, or the browser window itself. A fixed positioned element is also removed from the normal document flow & will stay right where it is as the viewport doesn’t change when the window is scrolled.

Sticky: A sticky element toggles between two position i.e; relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport – then it “sticks” in place (like position: fixed). It does not work in Internet Explorer or Edge 15 and earlier versions.

“Cleonix Academy” under “Cleonix Technologies” is a Kolkata based Web design training institute specializing in Website Design, Graphic Design, Web Development, Digital Marketing, Search Engine Optimization.For learning more about HTML & CSS contact now.

About the author


Leave a Reply

Your email address will not be published. Required fields are marked *

Latest Post

||Shubo Nobo Barsho|| 🎉Let’s cherish…

Posted on 15 Apr 2021

mobile seo

An Introduction to Mobile SEO and Why is it Important?

Posted on 17 Mar 2021

digital marketing

Basic overview of digital marketing everyone needs to know

Posted on 15 Jan 2021

app development Appreciation from UNICEF basics of digital marketing Bengali New Year best web design company in saltlake best web designing company in kolkata Bhai dooj blogging blogging tips blogging tutorial Bootstrap cleonix technologies Cross-Browser Compatibility Css3 Dhanteras digital marketing digital marketing tutorial Diwali Durga Puja E-Commerce Eid Mubarak favicon Gandhi Jayanti Ganesh Chaturthi GIF Graphics design Happy Holi Happy Teacher's Day HTML5 Independece day information technology iOS iOS app development iOS benefits IT blogs Janmasthami java framework java frameworks 2021 java learning java tutorial JPEG learn blogging Logo Design Magento magento 2 magento with google shopping meta tags mobile seo mobile seo in 2021 mobile seo tips Mother's Day Nationbuilder off page seo off-page seo techniques online marketing osCommerce PHP PNG ppc Pray for Chennai professional web design Raksha Bandhan Responsive Website Design SEO seo tips SEO tips in 2020 software tools Subho Noboborsho SVG UI UX virtual assistant virtual assistant monitoring web design web design in kolkata Web Development Website Design Website Development Woo Commerce Wordpress