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>
Related
Im trying to horizontally center this button to match the attached image.
I have it posted here
http://danux.me/
It does come after an absolutely positioned item with a z-index of 2. I am awful at the idea of positioning and surprised having those tiles overlap the blue bar worked, however, I'm not sure why the button won't appear below it.
The tiles also have an interaction in it (also surprised I could get this to work too after swiping the code) so maybe that has something to do with it?
Any guesses?
Put it inside a container with clear: both. This is called a clearfix.
<div style="clear: both">
</div>
I couldn't find the absolutely positioned element you're referring to. #home_console_wrapper has position: relative. You definitely want relative, not absolute, since giving an element position: absolute makes it float on top of other elements instead of pushing them down.
I have a div with which I display basic user information. The 'search-person' div has a height of 'auto'. This is so that profile pictures can be dynamic in size, up to 170px tall. Now, I would like to have a button displayed over the profile picture, and I thought to add relative positioning to the contents in the div and move it up and under the button, button it doesn't seem to want to work right. What can I do wrong?
here is my problem:
http://jsfiddle.net/C9Zj5/
#wrap {
position: relative
height: auto;
width: auto;
}
Make the #person-wrap position:relative and then the #buttons div position:absolute. That should give you the effect you're looking for.
div containing relative position should contain within another div having absolute position so that it can float correctly
If you set position:absolute to #buttons them you will have the button over the profile picture. Use left and top to positioning the button wherever you want inside #person-wrap.
I'm not sure what you mean with "and I thought to add relative positioning to the contents in the div and move it up and under the button", but if you want to show the info inside #person-wrap you can use position absolute or negative margin.
Aside: Is not a good practice to have div elements inside the link tag. Also why you need a button? Maybe you need to rethink the html structure as well ;)
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.
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.
I was trying to absolutely position an element at the bottom of the page (not the viewport). The element is a direct child of the BODY. You can imagine the page to have lots of content so that there is a scrollbar.
So something like this:
<body>
<img id="target" src="images/code.png" style="position:absolute;bottom:0;"/>
This put the image at the bottom of the viewport over the existing content. However, once I added the following css rule:
body{
position:relative;
}
The image went to the bottom of the page.
So if BODY is not the containing block of all elements, what is ?
Also, I am sure this is a solved problem but I couldn't find an example with detailed explanation of the problem and the solution. Any pointers?
It could be <html>?
Set position: relative on that and see what happens.
Update - Straight from quirksmode
The containing block
In order to specify the exact position of the element, you have to add top, bottom, left, and/or right declarations. These all give coordinates relative to the top/left or bottom/right reference point. What is this reference point?
position: static: No reference point, since a static block cannot be moved.
position: relative: The position the block would take if it were not moved (i.e. if it had position: static).
position: absolute: The containing block, which is the first ancestor element that does not have position: static. If there is no such ancestor, the <html> element serves as the containing block. (Note: in older browsers the <body> element serves as the default containing block.) <--- Bingo
position: fixed: The viewport (browser window).
Ok lets suppose you have the following:
<body>
<img id="target" src="images/code.png" style="position:absolute;bottom:0;"/>
<div style="margin-bottom: 50px">Content here</div>
</body>
This should solve the problem. Obviously set the bottom margin to the height of the image. Otherwise you could try setting the bottom margin of the body tag to the height of the image, then set the bottom setting for the image to -{height of the image}. This should achieve the same effect as above though.
PS In case you didnt realise, margin-bottom is the amount of space that appears below an element. If you want a coloured background for the body and you want this to take effect around the footer (like, say, if your footer is only 80% of the screen and centred, leaving 10% at either end) then you could always try padding-bottom: 50px.
Sounds like natural behaviour to me. You said the page would have lots of content and you would have a scrollbar. Having an element with position: absolute it would calculate it's position based on the nearest parent with position relative.
If the page is so high that you would have a scrollbar, the body element would stretch to the bottom of the page. Your image (position: absolute) is a child of body(position: relative), so I don't see the problem.
I also don't really understand your question:
I was trying to absolutely position an
element at the bottom of the page (not
the viewport).
This put the image at the bottom of
the viewport over the existing
content. However, once I added the
following css rule:
body{ position:relative; }
The image went to the bottom of the page.
Isn't the problem solved now? Do you want the image at the very bottom? (when you scroll down you can see it) or do you want it just above the fold?
Maybe this is a bit silly, but i think there is the above the body. I use resets, and in some of the large ones is always a line like this:
body, html { 'css properties bladiebla' }.
So to me that suggests that html is the container for body, sounds pretty logical to me ;) (but i can't find any references or proof of it myself a.t.m.)