I want to place a div over another. I asked this the other day and someone explained how z-index works (he or she said: "Element with a larger z-index number will cover an element with a smaller one")
I have now added another two divs and cant get the fourth one (the footer of my "document"/website) to be on top of the others
Here is the other's day question/thread: How to place a div over another
Someone asked what I wanted to do. I am just starting and following a basic course. The last "asignment" is to create a resume.
Here is theirs (example):
http://i.stack.imgur.com/xLgMM.png
However, I wanted to change it a bit.
I don't want any margins on the page (e.g. left of their blue left bar), I don't want rounded corners, and I don't want spaces between the divs. That is, I want all my "site" covered by color:
A beige-pinkish (#F5F0EC) on the background, a pink header, a grey footer and then a lighter grey as a margin on the left, on top of all of them.
This is what I have so far in my css:
#header {
width: 106%;
background-color: #E8D5C6;
height: 100px;
margin-top: -8px;
margin-left: -8px;
position: absolute;
z-index: 2;
}
.left {
width: 15px;
background-color: #919191;
height: 695px;
margin-left: -8px;
margin-top: -8px;
position: relative;
z-index: 3;
}
.right {
width: 106%;
background-color: #F5F0EC;
height: 695px;
margin-left: -8px;
margin-top: -8px;
position: relative;
margin-top: -645px;
z-index: 1;
}
#footer {
width: 106%;
background-color: #404145;
height: 50px;
margin-left: -8px;
position: relative;
z-index: 4;
}
Looks like my footer div is below the background (the "right" one with the color #F5F0EC), and I want it to be on top of it. And then, the left grey bar I want it on top of both of them (or all of them)
Tried ordering the elements with z-index: 1, z-index: 2, etc. but doesn't seem to work.
As the person in the answer you linked before (https://stackoverflow.com/a/32485707/5260563) stated, you need to use
position: absolute;
when you make an element have a z-index.
Related
I was having problems with positioning my language option at the top of my blog. It was always on a different position on a Windows and a Mac. So I thought about making an inner and outer div. But I'm having troubles with the position of my inner div.
This is the result I want:
This is what I have now
This is the code I have in my CSS on wordpress:
EDITED
.outer {
margin: auto;
overflow: visible;
background: white;
margin-left: 925px;
margin-top: -8px;
margin-bottom:-30px;
font-size: 11pt;
color: #E1BDC3;
border: 1px dotted #999999;
border-radius:8px;
width: 255px;
height: 48px;
padding-top: 15px;
padding-left: 10px;
z-index: 1000;
}
.inner {
position: relative;
left: 160px;
top: -336px;
background: transparent;
width: 150px;
z-index: 10001;
}
The block with the border just has <div class="outer"...
And the inner div, the dropdown, is a widget that I'm trying to position at the top of the page, I gave the widget "inner" class.
QUESTION --> If I put marging-right: 4px, it starts counting from the right of the screen, how do I position (for example 4px) from the right of the Outer div?
So that it starts counting from the dotted border on the right (or the left, doesn't matter)
(I'm a beginner in HTML so if you know how to help me, could you please tell me what code I need, and where?
You should use % to refer to positions on the screen. But your problem can be fix using position: relative to refer to the poition inside the parent object, and moving it with top and left
.outer {
margin: auto;
overflow: visible;
background: white;
margin-left: 925px;
margin-top: -8px;
margin-bottom:-30px;
font-size: 11pt;
color: #E1BDC3;
border: 1px dotted #999999;
border-radius:8px;
width: 255px;
height: 48px;
padding-top: 15px;
padding-left: 10px;
z-index: 1000;
}
.inner {
position: relative;
left: 159px;
top: -17px;
background: transparent;
width: 100px;
}
<div class="outer">
OUTER
<div class="inner"><select><option>INNER</option></select></div>
</div>
To answer your question "how do I position (for example 4px) from the right of the Outer div?" you would do that by first determining how the elements relate to each other. This is determined by the position and display CSS properties. Depending on which position and display values your two elements have, the answer will vary.
The HTML markup you provide for your "outer" element shows that it is a div. Your CSS does not define a position for this element, so the browser default is static, i.e. position:static.
Your "inner" element is a mystery to us. If it is another div then it is another static position which we can help with. If it is a ul then it is an inline element, which will require a different answer.
Your markup is important here.
EDIT
First thing, your 'outer' div is not actually containing your inner div. This is the outer div markup:
<div class="hide_on_mobile outer">Choose language</div>
You'll see it doesn't contain the element in question that we want to position. Therefore, like my first sentence states, we need to understand how our element in question relates to those around it.
In your situation, you are not in a good spot because the element you want to position is contained by elements that don't relate to your target element. Therefore the only way to position them in the same spot on all screen sizes is to position them absolutely and use percentages.
Or the easy way, if you want to stick to one screen width:
.inner {
position: relative; //override by .widget_polylang element
left: 27px;
top: -17px; //override by .widget_polylang element
background: transparent;
width: 100px; //override by .widget_polylang element
}
You'll see some of your key/value parameters are being outclassed by the .widget_polylang element. The only way to change those is to edit the styles of .widget_polylang or add increased CSS specificity to .inner.
I am building a webshop with on the left side a sidebar with a sort of navbar in it.
But the background (color Brown) has to fill the whole left side, but if my page is longer it covers not the complete left side.
This is my CSS for the background:
.sidebar {
z-index: 10;
border-top: 2px #000000;
position: absolute;
float: left;
left: 0;
margin-top: -5%;
padding-bottom: -10px;
width: 15%;
min-height: 115%;
max-height: 200%;
background: #C6A970;
}
Does anyone have an idea how to cover the left side of my webpage?
Thanx in advance!
according to the informations you gave you probably search something like that:
Fiddle
Your provided css already shows that your code must be messy, using float and position absolute together is weird and your min-height and max-height are over 100%.
We could help a little better if you provide full code.
Please try this:
Use this css:
.sidebar {
z-index: 10;
border-top: 2px #000000;
position: absolute;
float: left;
left: 0;
bottom: 0;
margin-top: -5%;
padding-bottom: -10px;
width: 15%;
min-height: 100%;
background: #C6A970;
}
or refer to the jsfiddle link below:
https://jsfiddle.net/89f074ke/1/
My Fiddle
http://jsfiddle.net/yjw46/2/
My Goal
I have this beautiful wheel of colors as a PNG. (I also have it as an SVG). When one of the colors is clicked, I want the WHOLE circle to change to that color. For example, if red is clicked, I want the whole wheel to turn red instead of colorful.
How I Intended to do it
I wanted to have a transparent (in the Fiddle it's semi-transparent, for debugging purposes) div in the shape of a circle (using border-radius) that will be DIRECTLY ON my color-wheel-image. When a color is pressed, I planned for the div to stop being tranparent, and (in a beautiful transition) turn to that color, making it look like the whole wheel has changed color.
Problem
I cannot get the div to cover the image.
So
I'd be glad to hear either why my technique didn't work, or a better technique, if you have one.
You was very close, simply chanage position: relative; to position: absolute; (on the div you want to have over the image) to fix the problem.
Now remember we need to have the parent as position: relative; or the absolute positioned div will not sit in the parent. You have already set this so its good to go.
Find more on position: absolute; here.
Demo here
#circleCover {
width: 300px;
height: 300px;
position: absolute;
top: 0px; left: 0px;
z-index: 2;
border-radius: 150px;
background-color: rgba(0, 0, 0, 0.2);
}
Here is a little demo to show what will happen without the relative position being set on the parent with the child having absolute.
Demo Without Relative
So you can see that the child is not staying within the parent.
And here is the parent with relative position.
Demo With Relative
As here the child does stay within the parent. This should help you understand why that is needed for the task you are trying to accomplish. Any questions please do just leave a comment and I will get back to you.
<div id="circleWrap">
<img src="http://y.emuze.co/circle.png" id="colorCircle"/>
<div id="circleCover" >
</div>
</div>
I have kept Your div one above the other
#colorCircle {
position: relative;
top: 0px; left: 0px;
z-index: 1;
width: 300px;
height: 300px;
top:0px;
}
#circleWrap {
position: relative;
top: 0px;
width: 300px;
height: 300px;
margin: 0 auto;
}
#circleCover {
width: 300px;
height: 300px;
position: relative;
top: -302px; left: 0px;
z-index: 2;
border-radius: 150px;
background-color: rgba(0, 0, 0, 0.2);
}
Here it is in action: http://jsfiddle.net/yjw46/7/
Change your CSS slightly.
#circleCover {
top:-304px;
}
Fiddle
Just add position:absolute in #colorCircle
#colorCircle {
position: relative;
top: 0px; left: 0px;
z-index: 1;
width: 300px;
height: 300px;
position:absolute;
}
I'm trying to create this design for a WP template:
http://minus.com/lbi1iH25EcKsu7
Right now I'm like this: http://www.uncensuredftw.es/plantilla-blueftw/boilerplate/index.html
I think you can get the general idea ;)
I know...it's my fault: The browser calculate the size of the window from left to right, so if I put a margin it will move the div with the 100% size to de right.
But the thing is: I don't know how to make it work :(.
I wanted to make the "black bars" with divs (I painted the ones than don't work in red and orange) and the trick worked...but only the left ones works like I want.
I'm getting out of ideas. I tried like everything I could think off, and nothing works.
Maybe you can help me? ;)
This is the html code:
<div class="barraUL"></div><div class="barraDL"></div>
<div class="presentacionbg"></div>
<div class="presentacion">
<div class="barraUR"></div><div class="barraDR"></div>
And this the css:
.barraUL {
position: absolute;
width: 50%;
height: 27px;
background-color: black;
right: 50%;
margin-right: 500px;
margin-top: -20px;
}
.barraDL {
position: absolute;
width: 50%;
height: 27px;
background-color: black;
right: 50%;
margin-right: 500px;
margin-top: 309px;
}
/* This next two are the ones than "doesn't work" */
.barraUR {
position: absolute;
width: 50%;
height: 27px;
background-color: red;
left: 50%;
margin-left: 500px;
margin-top: -4px;
}
.barraDR {
position: absolute;
width: 50%;
height: 27px;
background-color: orange;
left: 50%;
margin-left: 500px;
margin-top: 325px;
}
The right divs are expanding to 50% the window width. For a liquid layout where the bars extend to the length of the window and then cut off, you'd usually make an underlaying div (in this case the bars and the black patterned background) and then expand it to 100% of the window. You can't make an additive layout using relative lengths like percent (left div + fixed middle image + right div) with just CSS (especially not with absolute positioning). If you insist on using this, you'll have to overflow: hidden; the html {} or body {} tag after centering your content and that's just bad practice. I recommend just having two long divs go all the way across the screen under your sprite image.
I would like to make the blue element sit halfway up the green circle and behind it. How can I do that? Also, why is there a random marginal-space between the green circle and the blue element?
#profile-circle {
margin-right: auto; margin-left: auto;
height: 164px; width: 164px;
border-radius: 84px 84px 84px 84px;
}
#main-container {
margin-right: auto; margin-left: auto;
height: 400px; width: 450px;
}
http://jsfiddle.net/LqJ79/
position: relative will help you here. It allows you to use z-index to put the circle over the box, and also you can use top which will move the box relative to its current position. The problem with position: absolute is that it takes the element out of the flow, which is not what you need here I think.
#profile-circle {
position: relative;
z-index: 100;
}
#main-container {
position: relative;
z-index: 50;
top: -100px;
}
See the demo
Use attributes "position: absolute;" in the second box, I updated js fiddle CSS with the following:
#main-container {
margin-right: auto;
margin-left: auto;
height: 400px;
width: 450px;
background-color: blue;
position: absolute;
top: 80px;
}
The easiest way to move the blue element up is to set a negative top margin:
margin-top: -82px;
However, with your current markup, the blue element will sit on top.
You can either put the green element below the blue one in your HTML, then use CSS to slide it up, or you can:
use position: relative; on both elements
set a z-index on the blue and green elements to determine which appears on top (give the green element a higher number so it appears on top)
set top: -82px; on the blue element to slide it up under the green one
The space between them is due to your margins:
margin-top: 15px;
margin-bottom: 5px;
you can make the position: fixed;
top:10px;
left: 10px;
z-index: 1;
and what not in the css to move them around. like this:
http://jsfiddle.net/LqJ79/
The 'magical' space between the two is due to the margin in the div user-info. I changed the CSS to the following:
#user-info {
height: auto;
width: 380px;
margin-right: auto;
margin-left: auto;
}
This will removed the space.