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.
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
I am having a z-index issue. I have a couple of div that sit on top of each other, within them div there is some content which shows on mouseover. This content is currently being displayed behind the parent div.
The parent div have a z-index: 2 as they need to be displayed above there own parent.
<div class="activity-display"><!--parent div z-index: 2-->
Running<!--This is displayed on hover underneath its parent div, but gets hidden underneath the below activity-display-->
</div>
<div class="activity-display">
Running
</div>
I have tried adding a higher z-index to the anchor and this doesn't solve the issue
Any help would be greatly appreciated
When using the z-index property elements must be positioned. Change the a tag to position:absolute.
You should at least give the elements you want to work with z-index a relative position, because z-index doesn't works on a static position. So really any other than the default position works.
You also don't need to rearrange children or parents elements, because children elements will always be over the parent. In other words, a child element will always have a z-index + 1 relative to the parent.
Please make a fiddle, so that we can help.
Also, some points to keep in mind, z-index works for elements position absolute.
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.
So, I am working on a fansite, and I can't figure out why my "content" class div will not stretch. It's supposed to be 100% min-height, but it's not doing that. Also, I can't get it to stretch to the "column2" div, which is seated inside of it. Sorry if this is a simple fix, I'm very new to this. I wouldn't know where to start as far as posting coding for you guys to reference, so if you want, just go to here and view the page source.
Actually, it does stretch to the bottom --- the bottom of the html element. The problem is that your right column is position: absolute. Whenever you set an element to absolute positioning, it is detached from the normal flow, and so its container will not strech to contain it (which is a desired effect in drop-down menus and such).
Instead, you should use the float: right property on the right column and then add an empty div at the bottom which is clear: both, to ensure that the div stretches correctly.
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.