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.
Related
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.
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.
I have an absolute div as the main content area on my page design. I have another div that occupies the top portion and which is 450px in height. I cannot know the height of absolute div before page load, so will only be able to find it out after page load has happened.
Now the problem is that my body also occupies 450px (height), so if I want to display something after the absolute div has ended I am unable to do so.
Summary :
Absolute Div : 600px (for example, don't know the actual height) Has position:absolute.
Top Div : 450px (No position:absolute)
Body Becomes 450 px as expected
How do I place a div below the absolute div. Currently the only thing I can think of is jQuery.
Here is a jsfiddle I made to the illustrate the problem. Even though the whole body displays blue, if you fire up the developer tool and inspect, you'll see that the html and body both occupy
UPDATE : Linky I'm trying to display the main content area above a few elements. Those circles that you see are seperate elements. And they need to stay that way.
I think you need to learn more about the positions!
Anyhow the current problem you are referring to will be solve if you change the position to relative!
<div id="First Div" style="height:100px;width:50px;position:relative;background-color:green;">
</div>
<div id="BelowDiv" style="height:100px;width:50px;position:relative;background-color:pink;">
</div>
But if you really need to place it somewhere static or in another word "absolute", then you need to place a container div and set the position to absolute, then place the other two or even more or inside the container Div.
<div id="container" style="position:absolute; top:y; left:x">
<div id="FirstDiv" style="position:relative;></div>
<div id="SecondDiv" style="position:relative;></div>
</div>
You can use jquery to append tags to your container. here is the sample link to do it!
If it didn't help try the height:auto and also overflow:visible for your container!
I'm having a lot of issues positioning an image (arrow) within a pop-up window. Using positioning relative to the box, I can't move the img to exactly the right place.
So I tried absolute or, rather, placing a div within a div (excerpt shown.)
<div style="position:relative;top:0px;bottom:500px;left:100px">
<img src="my_image.png" style="position:absolute" height="50" width="100" alt="Arrow pointing to the top right corner of the page" />
</div>
However, now that it's not relative to the rest of the box, it doesn't really move - just expands the pop-up.
Is there anyway to do what I want? Am I on the right track?
Cheers!
Edit: This arrow is supposed to point to the header (pop up says "In the header..."); I don't particularly like this set up but can't think of anything else. If you've got a better idea please post :-)
You will want to have a combination like this:
Your parent element (the container div, i.e. the popup) needs to have position:relative or absolute
Your child (the arrow) needts to have: position:absolute,top:123px,left:245px (top and left indicate its position relative to the containing element).
The width and the height of the img are useless, unless you are reducing or expanding the IMG, which you should not do: drop them. I do not understand whether the div in your code is just a wrapper to the arrow, or is the popup container. In the first case you could just drop it, and set display:block to the img element.
You'd be beter making it a background image of the div.
<div style="background-image: url('my_image.png'); background-position:top right; background-repeat:no-repeat;">
</div>
Basically, I have a form, outside of that form in this random space on my page I want to position a div (containing two buttons). I've looked at using absolute positioning. However, it is positioning it outside of the page wrapper.
How can I get the positioning to be specified from the corner point of the actual page and not the window?
How can I get the positioning to be
specified from the corner point of the
actual page and not the window?
You need to add position: relative to the element you would like the top and left values to be offset from.
That might be your form, or it might be your #container/#wrapper element.
See here for details and a visual: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Looks like you have your answer by now. But ill post this anyways.
A simple and short example which shows how relative positioning to parent is done.
http://jsfiddle.net/EadXw/
If you want it positioned top:0;left:0 on the page, place it immediately after the <body> tag.
If it is wrapped in anything the containers may change it's position. Make sure it is independant and not influenced by any containers.
Sounds like you should read up a bit on the flow of the DOM.
Positioning with CSS and HTML
Make sure your <form> element wraps your whole "page" and that the <div> with the buttons is the first child of <form>.
When you do this you can add the rule position:relative to the form and position:absolute to the <div> and move it around with top and left.
Another option is to have no position rule on the form and have position:relative on the <div>. This is more compatible with iPad and iPhone devices, which don't like absolute positioning. When you go for this approach be sure to have a fixed height for the <div> and a negative margin-bottom of the same size.