I am developing html websites. Here is my code:
<html>
<body>
<div style="width:100%;height:50px;z-index:1;"></div>
<div style="width:100px;height:50px;z-index:2;position:relative;top:-50px;"></div>
<div style="width:10px;height:50px;z-index:3;position:relative;top:-100px;"></div>
</body>
</html>
The code here is very simple. I intend to group the 3 elements into one line. However, the spaces under the element at their original position are reserved. How can I remove the white spaces under?
That's because you're using relative positioning. In order for relative positioning to work, the browser has to load the DOM first so it knows the original location of the element, it can then apply the positional values to move it, this means the document will not re-flow around the positioned elements hence your white space. The quickest fix is to wrap your div stack in a relative positioned div, then apply absolute positioning
<div style="position:relative">
<div style="width:100%;height:50px;z-index:1;"></div>
<div style="width:100px;height:50px;z-index:2;position:absolute;top:-50px;"></div>
<div style="width:100px;height:50px;z-index:2;position:absolute;top:-100px;">/div>
</div>
You'll have to play with the inner div positional values, but that should work for you. The wrapping div with relative position set makes the absolute positioning use that div as the parent, rather than the body element, so in your example it is not required, but in the real world, you'll probably want to do this.
However, i'd consider whether a <ul> elemnt would be more appropriate in this scenario
relative positioning reserves the space where the element originally would have been placed. Use position:absolute instead. However, absolute positioning works differently. While relative takes coordinates "relative" to the element's original position, absolute takes coordinates relative to the parent* element's position.
*: The nearest ancestor with position other that static or if none is present, the body. In your case it would be the body.
Example:
<html>
<body>
<div style="position:relative">
<div style="width:100%;height:50px;z-index:1;"></div>
<div style="width:100px;height:50px;z-index:2;position:absolute;top:0;"></div>
<div style="width:10px;height:50px;z-index:3;position:absolute;top:0;"></div>
</div>
</body>
</html>
Sidenote: avoid inline styles and your markup is broken - you are missing a <.
See the demo
Related
My problem is similar to this post: How do I position an element relative to another without taking up space.
Though what I want is not exactly what was proposed there. But until now it was the closest example which I could find.
From what I understand, in this example, the position of the element in question gets updated only when a click on an icon-element is detected.
But with position:fixed that would mean that a scrolling wouldn't change the position.
What I want is to move the relatively positioned element dynamically with its parents while it does not take up its original space. (Background: I want some submenu-item-div to appear above its parent.) So the structure is similar to this:
<div class="entry-options">
<div class="menu1"></div>
<div class="menu2">
<div class="submenu2"></div>
</div>
</div>
submenu2 should be positioned above the entry-options (a horizontal bar) without changing its height or width, which should only be determined by the menu* - items.
Is that possible without changing the structure?
If you add position: relative; to the parent and position: absolute to the child, the child will be positioned relative to the parent without taking up original space.
I have put my code into codepen to easy display my problem :
https://codepen.io/anon/pen/wrVMPy
<div class="card">
<div class="front">
<h1>03</h1>
</div>
<div class="back">
<p>test</p>
</div>
</div>
(needed to be able to post codepen link for some reason)
So, my problem is that the back of the "card", which has position absolute, wont display relative to my viewport. it locks to the bootstrap column instead. i want the red box to always show up right in the middle of the screen when the "card" is clicked but it seems impossible.
Not even position fixed takes it out from the flow and adjust it relative to the main div or viewport.
And also with a z-index of 99 it still doesn't go over the rest of the elements.
I would be too grateful if anyone has an solution to this. Thank you in advance.
That's because position: absolute positions the element relative to the first non-static positioned element. In order to make it positioned relative to the viewport you need to use position: fixed instead.
I have a big div with a big background-image. Now I want to create some div's and to put them over some elements in the background image, then use qTip2 to give some explanations. In the middle I want to put a form.
<div id="bigdiv" style="background-image:url('back.jpg')">
<div id="qtipbox1"></div>
<div id="qtipbox2"></div>
<div id="form"></div>
</div>
The problem is: if I use position relative for the qTip boxes the form goes down. If I use absolute position, results are different as I resize window.
What do I have to do?
It'd help if you'd share the relevant code or (even better) put up a sample on JSFiddle.
Anyhow, you use position: relative on the container div with the big background image and then use position: absolute on the elements inside. That way, they should be absolutely positioned relatively to the container.
Is there CSS which can allow an element to follow flow (similar to position:inline), while a child to the element has position:absolute?
EDIT: the answer is yes, just use inline and position absolute. I had a different issue than the one I posted. My apologies. My issue was that using margin:auto made the item centred, but gave all margins 0 rather than the maximum amount (ie. the container would spread as far as it could and the border would generally touch the border of the parent element). To solve the issue I'll be using an additional container and text-align.
Thanks to the people who helped and read this question.
Ignore the following historic portion of the post.
Obviously I want the position absolute to be positioned relative to
the bounds of it's parents (so the parent would not have
position:static).
Still I am unsure how to do this. Does CSS even have the expressive
power to do this?
Think of having a picture in the middle of a paragraph, but instead of
an image, it's a container with more elements inside.
Basically what you are looking for is position:relative;
Position relative retains the normal flow position but allows coordinate modifications. Using the css values top and left, for example will move the object relative to where it should normally be placed. If you nest the object inside a div, it will use the div's top left corner as the 0,0 coordinate origin.
Keep in mind that the position:relative property is applied to the elements inside your parent container and not the parent itself. You can use static or whatever you'd like for the parent. However, the parent won't necessarily resize to encapsulate its relatively positioned children visually, so you will have to set height and width values yourself.
<style type="text/css">
#my_button {
position:relative;
top:10px;
left:10px
}
#my_div {
height:25px;
background-color:yellow
}
</style>
<div id="my_div">
<input type="button" value="OK" id="my_button"></input>
</div>
Use position:relative; That way the parent stays in the same location but child elements with position: absolute are positioned relative to the parent not the body.
I have a div element that is defined on the top of the page and I have this another div element that is defined at the bottom of the page.... is there any way that I can define the first div element (at the top) as a child of the div element that is at the bottom.
The problem is I need a div in header in the header file (header.php) this div acts as a container for an JS, but once the data is loaded I want it to be displayed inside another div.
Would postponing the loading of JS till the middle section of page is advisable...
Yes: make the top div a child of the bottom div by placing the child within the markup of the parent, and use absolute positioning to move the child to the top.
No, because it's not a child of that DIV. If you want it to be a child, make it a child, and then alter it's position with CSS to be on the top of the page.
No, though you can move it with JavaScript after the second element loads.
By "child" do you mean simply appears inside, yet the HTML is defined at the top? If so, you could also possibly simply change the positioning via CSS.
Are you constrained to output the HTML for the first div at the top of the page for any reason? The real solution here is to simply output elements where you actually want them.
No idea why you would want to do that but this markup should suffice:
<div id="wrap">
<div id="main">
<!-- Insert content, push off the top with "margin-top:150px", etc. -->
</div>
<div id="foot">
<div id="head">
<!-- Insert header stuff, position with "positon:absolute", etc. -->
</div>
</div>
</div>
Tweak width, height, margin and padding of elements to taste.