I want to insert a div into a page, put div into the coordinates that I want, but do not move the rest of the page content
What I had done is to put the parent container a position: absolute and the div that I want to have floating a position: relative and then go tell the px to position it where I want, but doing so the content of the page moves me Site, and I would like you not to move the rest of the content even if the div is above it.
What could I do ?
Instead of floating it, you'll need to position your div with either position: absolute or position: fixed.
You have to set position: absolute to the float div instead of the parent div.
It should be possible with CSS. I would try setting the html tag to be relative and the div you want to absolute (if no other tags are set to relative). Otherwise I would recommend jQuery for the solution.
Related
I created a contact form with a banner at the top of it. I created the entire thing and was planning on moving it to the right, off the screen, so that it will slide onto the screen when it is hovered over. I intended to just wrap a div around all of it and then relatively position it and move it however far I needed it to go to the right to be off the screen. However, when I tried to do this, it made the banner and the contact form box, as well as everything inside of those two elements, show up in a bunch of different random spots around the screen. I figured this was because it applied the relative positioning, as well as the left:100px value I set with it, to every element within the div and that, mixed with the other positioning I had set for each object, caused the weird displacements? Does anyone know how I can move the form and the banner so that they stay attached to each other and everything inside stays where it is?
Here's the JSFiddle where I set up the contact form box and banner: LINK
Thanks for any help
i'm not sure about all your absolute and relative positioning insde of your form - if you dont want to place the elements at very specific points you wouldnt need this.
here's a jsfiddle for what i think you want to have:
https://jsfiddle.net/spmhxteu/
basically you will need to set this for your email wrap
position: absolute;
right: -200px;
and you should set this for your body or whatever is wrapped around
overflow: hidden;
width: 800px; // example
all elements INSIDE your absolute positioned div do not have to be relative or absolute again.
UPDATE: As requested here an absolute positioning inside the element:
https://jsfiddle.net/spmhxteu/1/
Note: Ofcourse your padding etc. of the parent div will not apply on absolute positioning
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 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 CSS tooltip, with CSS3 fade in, with z-indexes set to 999. When I hover over the link, the tooltip itself pushes my other content down, it's meant to be above, not inline, although I've used a span and converted it to block..
Here is an example of what I'm going for, how can I stop it from pushing the content down?
Thanks.
Display:block doesn't take an element out of the page flow, it simply pushes it onto its own new line. Using position:absolute - as recommended by other posters - should work for you. Position:absolute will set a position (such as top:0px; left:20px;) to the browser window overall unless there is a parent with position:relative set (which would then become the point of reference). An example of this second type would be positioning a link exactly 30px from the right within a given content div - regardless of where that div is placed on the page.
Position:relative can be used to position an element relative to its original position in the natural page flow, and it leaves a space where the element would have been. Position:fixed can be used for elements that should not move when the page is scrolled (such as a fixed navigation bar, page branding, or footer). Position:static is the default position setting, and should be used when you need to override another position type.
If you're using a span for the tooltip text within another element - you'll likely want to set the parent element to position:relative, and set the inner span to position:absolute. You'll need to set a top and left value to adjust where exactly your tooltip text falls (ie. above or below the parent element, to the left or the right).
I hope this is helpful.
Absolute position the tooltip (set the container's position to relative and the absolute position will be relative to the container).
Did you make sure the tooltip css position value it absolute? (or at least not static).
say I have something like
<body><div id="a"><div id="b">some content</div></div>more content<body>
and I don't know how much height "some content" is going to be. But I have #b styled to position: absolute and #a styled to position: relative so #b's position is relative the the top left corner of #a. Is there some way I can make #a expand to contain #b some that "more content" gets pushed after?
thanks
Replacing absolute with relative might get you what you want, like in this jsFiddle.
Your example is flawed as there is no actual need to have pos:abs on div#b as by default that element would be set at the top/left of div#a.
Using css position will take its applied element outside of the normal markup flow, even if you was to use pos:rel on div#b it would only increase the height of div#a it would not take into consideration any positioning you may have also applied to it.
There is a way you could achieve what you are after, but that would rely on using JavaScript.
It sounds like position relative for #b might be a better solution.
As #b is the first element in #a it woudl naturally appear in the top left corner of #a, so position relative will position relative to the same point as position absolute.
Also, say you want to push #b down by 30px, then you set
#b{position:relative;top:30px;margin-bottom:30px;}
Content will clear the bottom of #b because position:relative leaves a block in the content flow equal to the height of #b + 30px;
No. Absolute positioning removes elements from document flow. Their parent and sibling tags have no way of knowing that they are overlapping an absolutely positioned element or not.