I want to make the div 1 on top of the div 2, but this doesn't work
.div1, div2 {
width:100px;
height:100px;
float:left;
}
.div1{
left:-50px;
position:relative;
z-index:-1;
}
.div2{
left:-50px;
z-index:1;
position:relative;
}
If your blue box appears first in the HTML, then change bluebox's left to px and redbox's left to -204px. If the red box appears first in the HTML, then change redbox's left to 0px and bluebox's left to -204px.
(The extra 4 pixels is for the 2 px border on either side.)
Using Myles' JSFiddle, here is a demo of the position:relative solution: JSFiddle
If you want the blue box on top you have to give it a higher z-index value. Right now it is lower.
That doesn't really matter though because you have them both floated and margined left so that they don't actually overlap.
Try giving the red box margin-left: -200px and give the blue box z-index: 10.
Try to avoid negative z-index values,
try using z-index:1 on .bluebox and z-index:2 on .redbox
Here you go:
Live Demo
Clever blend of absolute positioning and z-index :)
In your example, the boxes aren't overlapping because they're floating next to each other, then you move them both to the left 100px. Try only moving the red box to the left, then give the blue box a higher z-index if you want it to be on top. The z-index is the stacking order, where elements with lower numbers appear below elements with higher numbers. The Mozilla Developer Network has good information on this topic.
With some slight tweaking, this works fine for me: http://jsfiddle.net/mlms13/ZGJXt/2/
Related
Please check this fiddle
https://jsfiddle.net/manuchadha/rc0dxog1/12/
How does bottom and right work in css as in the following example? They don't seem to have any effect.
HTML
<div id="div3"> top left bottom right div</div>
CSS - this CSS moves the div as per top and left. Right and bottom have no effect.
div#div3 {
width:100px;
height:100px;
background-color:#eaf;
position:relative;
top:50px;
left:50px;
right:50px;
bottom:50px;
}
This CSS moves the div up as expected.
div#div3 {
width:100px;
height:100px;
background-color:#eaf;
position:relative;
right:50px;
bottom:50px;
}
But this CSS seems to give top and left priority over bottom and right.
div#div3 {
width:100px;
height:100px;
background-color:#eaf;
position:relative;
right:50px;
bottom:50px;
top:50px;
left:50px;
}
What is the expected behavior if I give all four properties in the CSS - top, left, bottom, right? Shall I specify only one of right or left and one of bottom or top?
With position:relative, you cannot specify all four at once. In fact this only makes sense if you are using position:absolute.
relative means 'shift the element a certain amount vertically and horizontally relative to its normal position'. If you specify left:10px and right:10px at the same time, what does that mean? Should the browser move the element to the left or to the right? It is not clear. So, in practice, one rule is simply ignored.
Take a look at MDN's article on CSS position:
Except for the case just described (of absolutely positioned elements filling the available space):
If both top and bottom are specified (technically, not auto), top wins.
If both left and right are specified, left wins when direction is ltr (English, horizontal Japanese, etc.) and right wins when direction is rtl (Persian, Arabic, Hebrew, etc.).
You should save calling top left right and bottom for position: absolute
Try calling margin-right and margin-bottom
If I want to have my background be separated into 4 equal-sized divs, that isn't hard for me to accomplish. What's puzzling, though, is that only the top and left margins appear, and I cannot get the right specification to have margins on the right and bottom appear.
.bg {
height:100%;
width:100%;
position:fixed;
background-color:blue;
}
With the code above, you can see that there is a top and left margin only.
The way I figured out is to just set the height and the width to slightly under 100%. Thanks for the other feedback.
I have a problem with setting the appropriate text to the slider. I want the text to appear on the bottom right of the page. Only problem is the different resolutions (tablet, laptop, 24'' monitor).
Testing page: http://tinyurl.com/d825kuv
code:
div {
position:relative;
float:right;
vertical-align: bottom;
}
to move an element to the bottom of a <div>, set the parent <div>'s position to relative: position:relative, then the <div> you want to be placed at the bottom should have CSS
div {
position: absolute;
bottom: 0;
right:0;
}
then just adjust the pixel values to suit your layout.
Do:
position:absolute;
right:0px;
bottom:0px;
This will make sure that the element in question will be as far right, and as far down within the parent as possible. Of course if you wanted to pad it from the right/bottom just take the pixels up a notch. Note that position:absolute only works if the parent's position is not set as default. If in doubt give your parent the following style:
position:relative;
so the past days i tried to achieve the following:
the idea being to have a div (red) that is ultimately centered (using margin:auto;), and on the same level (x-axis) another div that has a fixed size (blue).
on a huge enough display, maximized, it looks great.
now the fun part is when having a smaller screen and/or resizing the window. because of the auto margin, one of the divs overlaps the other:
this is what i want to prevent. (in explanation: red being the menu, blue being the logo)
so the first idea was to shift the red div the needed pixels of the blue div to the right, using padding-left:??px;
but that makes the red div no longer center itself absolutely, but padded ??px to the right. figuratively centered in an extra box (grey).
second idea being to create another (transparent) div on the right of the red div. but that makes the min-width of the whole site become out of bound:
in other words: the scroll bar becomes visible far to early. it's ought to appear just when the window is smaller than the sum of pixels of the red and blue div together. and not, like in img 4, where it appears just when the window is smaller than the sum of pixels of the red div and both divs right and left from it).
so what i want is that:
two divs, not overlapping (even when resizing), the right one at a fixed size, the left one in the center of the window, whithout creating a ghost div, creating blank space on low resolutions.
oh and please no javascript, if possible.
i hope my explanations helped a bit getting my idea.
and i furthermore hope someone with a great idea or with an overlooked feature can help me out.
I take it back... it's marginally possible... with a lot of hackish coding...
http://jsfiddle.net/7myd4/2/
http://jsfiddle.net/7myd4/2/show
There you will find the code and the demo. It involves a wrapper, padding, relative positioning, and a really hackish layout. :P
EDIT:
looking back at this answer from over two years ago... I've come to the conclusion that this answer is terrible.
I've updated it with code samples and a new demo (only thing different is formatting changes and moving inline styles to classes)
HTML
<div class="firstdiv"></div>
<div class="seconddiv">
<div class="innerdiv"></div>
</div>
CSS
body{
padding:10px 0px;
}
.firstdiv {
background-color:#ddd;
position:fixed;
left:0px;
width:200px;
height:200px;
}
.seconddiv {
margin:0 auto;
width:300px;
height:150px;
padding-left:400px;
position:relative;
left:-200px;
}
.innerdiv {
background-color:#ccc;
width:300px;
height:150px;
}
Demo: http://jsfiddle.net/7myd4/55/show
Source: http://jsfiddle.net/7myd4/55/
use Javascript to change the width of the div based on the window width. or use css stacks to check the max-width of the screen and have css for that size.
http://api.jquery.com/width/
http://api.jquery.com/resize/
or check out this stack.
How to dynamically change image/div dimensions based on window size?
I have a couple of Divs which I style using a class and an ID, he div's themselves are emtpy since they are only placeholders for their background. Example Div:
<div id='ranImg1' class='ranImg'></div>
Then I style them using this css:
.ranImg {
position:fixed;
z-index:0;
width:250px;
height:250px;
display:block;
}
#ranImg1 {
left:10px;
top:200px;
background-attachment:fixed;
background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
background-repeat:no-repeat;
}
As long as the Div is in the left top of the document the Image shows correctly but when the Div is placed somewhere else on the page the image stays (invisible) in the top left corner of the page showing only the part which overlaps with the div (in the example this would be the bottom part of the image).
EDIT
I'm trying to position these Divs without effecting my other layout, they are behind the other layout. This works except for the fact that the background image doesn't follow the divs position.
So basically my question is, why isn't the background for the ranImg1 div positioning with the div but stays in the left top corner, and how to fix this?
your background-attachment:fixed will attach the background image relative to the browser window. if you want it to "follow" the div position, just remove the line:
#ranImg1{
left:10px;
top:200px;
background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
background-repeat:no-repeat;
}
you could also set the background-position attribute to set the background relative to the containing div:
background-position: 0px 0px;
i'm not sure if that would help any beyond just removing background-attachment though (not enough coffee yet!)