Blog

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


0 comments

Leave a Reply

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

Categories
Latest Post
digital marketing

Basic overview of digital marketing everyone needs to know

Posted on 15 Jan 2021

Top trending java frameworks for 2021

Posted on 11 Jan 2021

web design

Find the best web designing company in Kolkata to build your own website

Posted on 15 Dec 2020

Tags
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 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 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