is there anyway to set the position of a common div on the bottom of the page, without pushing it out of its container, without setting container's height and absolutely without setting its position to absolute?
I mean, i'd like to set a div(alpha) to the bottom of the page, but it's contained in another div(beta), and i was wondering if there's any way to push alpha down and make it reach the bottom allowing beta to continue containing him?
this is my situation
<div class="beta">
<tons of divs></tons of divs>
<div class="alpha"></div>
</div>
and this is what i would like to obtain http://codepen.io/anon/pen/BNYVZE
BUT without setting:
beta display to flex;
beta height;
any help would be much appreciated >.<
Theoretically you can set margin-top: (whateveryoulike)vh on your .alpha elementlike here http://codepen.io/rokki_balboa/pen/rVJKJy,
but the best practice would be set position: relative; on .beta and position: absolute; bottom: 0; on .alpha
.
Related
I'm having and issue using an html document with style controlled by an externally linked css. I'm rendering locally and have tried both chrome and firefox.
This issue is this:
I have two <div> elements both with height and width values of 200px (I'm placing colored squares onto the webpage). However their position attribute values differ. One's "absolute" the other's "relative". I'm essentially trying to lay the two boxes on top of each other. For example (in the css file)
#item1{position: absolute; left:300px; top: 300px; z-index: 1;}
#item2{position: relative; left:300px; top: 300px; z-index: 2;}
item2 will be offset from item1 by 8 pixels, down and to the right.
I've tried setting all margins (and padding) to zero on item2 but didn't work.
Thanks!
You need to use position: absolute; for both divs.
Try changing item2 to:
#item2{position: absolute; left:308px; top: 308px; z-index: 2;}
Both divs must be positioned absolute if you want to place one div on top of the other.
Get to LearnLayout.com/position.html right away to understand and solve this. Then read through the entire site (it won't take long and you'll thank me) -- it's the best site I've ever seen on everything that frustrates people about css. It will save you hours and days in the long run.
I'm building a demo for an app I want to create and I am trying to create buttons on a mobile phone. I brought in an image of a phone and created buttons set to absolute positioning which allows me to layer them over the phone, but when I go to resize the page, the element moves a lot and does not stay in the same place on the phone. How can I fix this? Please see fiddle to see exactly what I mean: http://jsfiddle.net/x313vkup/
I would really appreciate a modification of my fiddle link so I can understand how this works.
This is a snippet of the code that shows the list set to absolute positioning:
#phone_view {
position: absolute;
margin-top: -65%;
margin-left: 15%;
}
The beauty of position:absolute is that you can accomplish a lot without setting margins -- you can go straight to using top, left, etc.
An absolutely-positioned element needs to be positioned relative to a wrapper, however. I would recommend setting your #phone element to position: relative and then setting the position and dimensions of #phone_view "manually" in the CSS.
I would also recommend creating another wrapper element inside of phone to act as the relatively positioned element, since your h4 can wrap onto a second line, drive down the phone image, and get it out of sync with the absolute positioning.
EDIT: link to JSFiddle. Note the relatively-positioned wrapper (.phone-wrap). Child elements with position: absolute will define their position based on this wrapper. Also, no need for margins on #phone_view.
Also, re: #phone_view, background-color is just to make it visible for the demo, and while overflow: auto seemed appropriate for the demo, it doesn't affect the positioning of the object itself.
I set up 4 bocks in perfect allignment using absolute positioning. My understanding is that this is that you basically setup the x,y location of each block using top, left and the parent element is the origin. All worked as I expected and I marvelled at how nice things worked. Than I hit the zoom button in IE 9 and although the y coordinates maintained there state...the x cooridanates shifted to the left..some even past the parent element..which makes even less sense b.c. I did not specify any negative values. Why would zooming effect the absolute positioning?
Zooming changes the size of these elements but not it's position. But I don't know how to prevent that, I think you cannot do anything against that because it's caused by the browser.
The only possibility is maybe checking the size with JavaScript, maybe it's possible to recognize this with JS, but that would be very difficult. Anyway, is it important that it works while zooming?
If your 4 blocks are identical in height and width, you could do this:
div.block { height: 200px; width: 400px; float: left; }
Then put them into a container that only allows two blocks side by side.
Example Fiddle:
http://jsfiddle.net/u5xVa/
Your absolute positioned elements are currently positioned relative to the <body> tag's top/left position (which is always 0px/0px).
But you have a centre aligned layout, with margin-left: auto; margin-right: auto; and you want the absolutely positioned elements to line up with that perfectly.
Say you use zoom to make the page smaller by 50%. This will reduce the left position property by 50% and reduce the width of the margin:auto; element by 50% (triggering the left/right margins to be increased by whatever the width change is!).
So, zooming the page smaller makes the margin on the centred element bigger but it makes the absolute position coordinates smaller.
To make it line up perfectly, you need to make the absolute positioned elements relative to the element with margin-left: auto;.
In your specific example I would do this:
div#Ab1
{
position: relative;
}
div#Ab1_2
{
position: absolute;
top: 80px;
right: 0px; /* note: setting a right position, not a left position */
}
/* and do the same for div#Ab1_4 and div#Ab1_4_under */
Does that make sense?
PS: the reason it worked locally and then was broken when you uploaded, is you probably weren't viewing the page at the default zoom level on one of them.
There are many ways to do this right...but what I ended up doing and what makes most since to me is to set up an x-y coordinate plane and position your elements using margins or top and left attributes. To do this I set the parent div to relative positioning to make it register as the "origin" and then set my four square divs as absolute positioned. This works well. What through me off is that you have to set the parent div of you your absolution positioned elements to a non-static positioning.
Don't avoid tables if they are they right way to go - aligning 4 blocks left to right, top to bottom, is easiest done with a table, imho. You can use div with float left and right and junk like that, but the cells in a table never shift out of alignment.
I'm using a div with position: fixed to overlap an image. This works fine in firefox, but not in IE8. The div just sits below the image, even if I play with the top and left parameters.
Example of my Problem
Is this a known bug?
This is not the only way but should give you good starting point at least.
http://jsfiddle.net/lollero/EREc7/ - Parent element that has position: relative; makes sure that the element with position: absolute being the overlapping div would stick with the image no matter where you put the image.
http://jsfiddle.net/lollero/EREc7/1/ - The same with border
You can also do something like this:
position: relative;
z-index: 4 /* The higher the number the higher the element is. make sure to*/
top: -50px;
left: 0px;
And something like this:
http://jsfiddle.net/lollero/EREc7/3/
Note that the first one is the most flexible one.
Here's a bit bigger example
http://jsfiddle.net/lollero/EREc7/4/
Examples from the comments:
http://jsfiddle.net/lollero/nBk79/1
http://jsfiddle.net/lollero/nBk79/6/
Use z-index if you're talking about layering over one another. Then you can adjust them where you want and put one on top of the other.
Unlike most questions about overlapping content seen here, I would actually like content to overlap!
Here is my page. Try typing "USA Riverbrooke". Returned content pushes down the map.
What css syntax can allow the returned content to slide down and overlap the map?
http://tinyurl.com/ycblkkz
Make #message position: absolute; but also put it inside the same parent as the map, set left: 0; top: 0; on it, and set position: relative; on the parent. You shouldn't need to mess with z-index.
make the #message div position:absolute and give it a z-index greater than 0. It will show up on top of the map. You should then give it a non-transparent background so it stays readable.