What's the recommended & most elegant way of getting rid of the gap caused by position:relative?
I have a front page and want to put a banner that will be partially above the header and content section, but using position:relative produces an empty area...
See example (I want the text to be just below the red box):
http://jsfiddle.net/Ru2CT/
I know I could create another relative positioned div as a parent of my text, but then I'll still have the gap but between content section & footer...
Any ideas? :)
Take the entire contents of the grey box, and place it within a div (stretched to be the same size). Then move that box up with position:relative. This will have the effect of moving the text with the red "slider"/banner thing, without moving the gray background.
Here we go:
http://jsfiddle.net/4BLFJ/ [animated and annotated]
This is not what you asked, but is one of the two ways I would do it:
The main idea here is to make the banner an absolutely-positioned div (not absolutely-positioned on the page, though you can do that too; it may in fact be better).
First set the #content area to be position:relative, but NOT change anything else. This creates a new stacking context (child elements use top/right/bottom/left and percentages relative to it).
Then put the banner-thing as a child element of the #content area, and set it as follows:
position:absolute;
width:80%; height:100px; /*there are other ways to set the height and width*/
bottom:100%; /*this puts it at the top*/
/*you can also use bottom:105% or bottom:90% or other things, or if you really
want to use non-relative units like px, you can create a third nested div that is
relatively positioned by whatever px amount*/
Negative margin would be a much more elegant solution in this situation (revised jsFiddle). Note that I've had to move the #eee background to div#main, as it would otherwise overlay on the background of div#top.
As a general rule of thumb, I'd also recommend avoiding relative positioning unless absolutely necessary - can often lead to z-index headaches in older versions of IE.
I've finally resolved this issue, simple:
position: relative;
bottom: 200px;
margin-bottom: -200px;
Does the magic! :)
Related
Hi, I am trying to position two images next to each other and have one of them overlap the other one in a corner.
I have tried using the z-index property but this does not work unless i set the position property to something like fixed or absolute and this messes up the layout of my site.
I was wondering that although i have an image container with the width and height set, can i possibly cut out a section of the container like a rectangle to let the image sit inside the cut like the image below me.
Is this possible?
Thanks!
position:relative positions the element relative to its normal position, and pretends, for document flow, that the element is still there. See this example:
http://jsfiddle.net/GtJMF/
position: relative;
I can't see how having a position:absolute for this scenario would mess up your site.
Put position:relative on your "Image Container". Put position:absolute; right:0, bottom:0; on your "Cut out part" (assuming it is also in the Image Container). This will give you the exact effect you are looking for.
Positioning is relative to the containing positioned parent. Just a position:relative is enough make an element a "positioning master" that all interior positioning will use for its coordinate system.
position:relative also "enables" z-index, but unlike absolute and fixed it doesn't mess up any of the rest of the layout.
When I made my HTNL page, it looked perfect, but all of a sudden, I've been getting this huge white space on the bottom of my page. you can see it at http://thomaswd.com/pearinc2. How do I get rid of this?! My stylesheet's at http://thomaswd.com/pearinc2/style.css
If you look at the HTML element with the class back-iphone4s you'll notice it's positioned relatively using CSS.
If you remove the position: relative portion from the CSS rules for .back-iphone4s you'll notice it appears where your white space is.
Using position: relative like this is always horrible, white space appears where the element would have been if it wasn't positioned relatively.
What I would recommend is adding position: relative to the div with devices as its class, then use position: absolute; on .back-iphone4s and set it's position using that method. This way the back-iphone4s element is positioned relatively to it's parent, not relatively to where it would be in the normal document flow.
There are are a number of other ways you could solve this too, at I glance I would be very tempted to just turn those two iphones into one image, less HTML, less CSS and less images to download, but it appears you may have inteneded them to be seperate for a purpose, so maybe that's not a viable solution.
... phew, hope that makes sense, let me know if now.
I just had a quick look at your style, what I saw is technically very ugly.
You set all main elements with position:absolute and made them independent from context and content-flow. And because they are absolute, you have to give them a height - and that causes in things like that ugly white-space.
I would say you have the wrong concept of styling / structuring the page.
Try to use "position:absolute" very rare!
Give a height to the .devices class:
.devices {height: 520px;}
Struggling a bit with HTML positioning. I'm sure it's a pretty simple problem, but just can't crack it.
Please see fiddle: http://jsfiddle.net/HMyXW/2/
Basically, I am trying to position the yellow div (#logo) above everything else, so it will push any other content on the page down, even if the screen is resized vertically.
I've tried messing with z-positions, etc. but am not having much luck.
I suggest remove all the fixed positions if it is not necessary and add a outer div to wrap all the child divs.
Check this DEMO
If it is necessary to use the position:fixed to the #logo then you need to check the height of the #logo and give the same value as margin-top to the content div.
Your #logo has position: fixed; which means the element is removed from the normal page flow.
I have two elements (images)
imgA is 2000px high
imgB is 1000px high
I place them one after the other and then move imgB up (I use relative positioning) to overlap the imgA.
Thus, the window in the browser should be 2000px high.
However, it seems, that when placing imgA and then imgB, the browser allocates the place for both of them i.e. 3000px hig, and after I move imgB up to overlap imgA, I have a blank space =1000px left at the bottom of the page.
How can this blank space be prevented?
Thanks
Ignore this
This is because the images are block level elements. To stop the
browser from allocating space you can just add: display:inline-block
to the second image. This will bring the image out of block structure
and so the browser will not allocate it whitespace.
Also have a look at Relatively Absolute positioning, it is very handy for the sort of thing you are doing.
EDITED
As commented below, this does not work. Use instead the Relatively Absolute positioning.
Here is a jsFiddle that shows the code needed to position an image over another
Use display: block on your images, then use position: absolute instead of position: relative to position imgB over imgA.
Don't forget to assign the parent element to anything other than position: static to make the positioning of your image relative to the parent element.
for further clarification you can see the examples of "css block" here
http://www.tutorialswire.com/css/css-display
Absolute positioning is only a specific solution to your case. It may not work in some similar case (For example if you have other elements on top of those two images inside the general containing div).
I believe best solution would be using
margin-top: -1000px;
for the second image.
I'm trying to get my wrapper to hold my content but it won't. I've taken out the floats and added "overflow: visible" no no avail. I'm thinking it's because of my z-indexing and negative margins, but have tried taking these out and still no change. Any ideas?
http://www.jenniferhope.com/bio
(the float is still in this example.)
Thanks for any help you can offer!
Try this:
#wrapper {
overflow:auto;
}
I took a look at the code on your site. There are a number of things you will probably want to address. It will be difficult to say exactly what you need to do, since I don't know exactly how you want the site to look. But, in general, here are some pointers:
To contain floated elements, apply overflow:auto; to the parent element, or place something to clear the floats at the bottom of the container, such as: <div style="clear:both;"></div>
Try to avoid using negative margins for positioning. This is OK in a pinch, but usually there is a better way.
If you need to have one element layered over another, you will need to position the element using position:absolute; and a z-index. When using position:absolute; the element will be positioned relative to the nearest ancestor that has position:relative; applied. If no element has this applied, it will be positioned relative to the body element.