krrahman Posted September 17, 2014 Share Posted September 17, 2014 Hi all, I want to know, where should i use css position property instead of using float left and right, inline block etc. Is there any benefits to use css absolute value property? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 17, 2014 Share Posted September 17, 2014 (edited) Never Ever! use position: absolute; UNLESS the same result cannot be achieved with floating, margins, padding, inline-block. Position absolute occupies no space, so other elements won't detect it content area to move accordingly, you would have to adjust these elements manually each time to allow for this position: absolute element content changes. Position: absolute; is mainly used for overlapping elements for example: text over images, images over other images. Edited September 18, 2014 by dsonesuk 1 Link to comment Share on other sites More sharing options...
davej Posted September 18, 2014 Share Posted September 18, 2014 As Dsonesuk says, position absolute should only be used as a last resort. Too many people use it where it isn't needed -- and then it creates new problems for them. Link to comment Share on other sites More sharing options...
Lesly Posted September 20, 2014 Share Posted September 20, 2014 This is exactly my problem but I can't figure out how to fix it. I posted in more detail here: http://w3schools.invisionzone.com/index.php?showtopic=51443 Link to comment Share on other sites More sharing options...
dsonesuk Posted September 20, 2014 Share Posted September 20, 2014 UGGHH! talk about overkill with class names, you have to give the container that is same width as slide show below, (not going to give class name of container as looking at all those classes gives me headache and makes me nauseous), a position:relative; this will cause title to be relative to the container edges (same as slideshow width) and not screen, adjust height, move slideshow wrapper up using top margin -30px; and title will be fix above slideshow, got to go going to throw up! uuuuuuuuuuuurrrrrrrrrrrrggggggghhhhhhhhhhhhhhhhhhhhh technicolour yawn. Link to comment Share on other sites More sharing options...
Lesly Posted September 20, 2014 Share Posted September 20, 2014 ? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 20, 2014 Share Posted September 20, 2014 ????Normally you would place a position: absolute; element within a element that uses position: relative; that you wish to overlap, this forces its position to be determined by the outer edges of the outer container element. So the position absolute; element within an outer element with width 960px centred horizontally using right: 100px; would be a fixed 200px from right edge of outer element and not 200px from right edge of browser window.Your title element is outside the slideshow container element, but within centred inner element that is same width as slideshow, that is within outer element thats width is same width as browser window.So you either have to move title within slideshow OR position the title outside its current parent element so it overlaps slideshow given the same effect. Link to comment Share on other sites More sharing options...
Lesly Posted September 20, 2014 Share Posted September 20, 2014 thank you! Link to comment Share on other sites More sharing options...
kelly2marie Posted October 2, 2014 Share Posted October 2, 2014 absolute positioning can be used any time you need a 'Layer' (sometimes called an AP div). Basically, a Layer is a div tag given 'absolute' position: <div id="layer1"></div> #layer1 { position:absolute; width:200px; height:200px; } Any time you use absolute positioning, you must set a height and width, though there are some exceptions to this. You can also use the following CSS Properties to help position your layer: top right bottom left z-index The problem with Layers is that they are not nearly as flexible as we need them to be. This is mainly due to the fact that they are removed from the normal flow of the page. Meaning, a Layer is positioned according to the x and y axis. Other elements completely ignore Layers. This is a major reason we avoid using them. But any time you need to overlap an element, a Layer is perfect for the job. Just be sure to set 'position:relative;' on the containing div. That way, your Layer will be positioned according to the edges of the containing div, thus giving you better control over positioning. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 2, 2014 Share Posted October 2, 2014 So basically what we already explained. OK!...... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now