I am having trouble with element stacking in a HTML page. I need to get span (class="class_span") to have a higher stacking order than div (class="class_div") with border. I have tried to change the z-index but with no luck. I know that I should not use absolute position, but the page is dependent on it, sorry. How can I accomplish this?
HTML:
<ul>
<li>
<div class="class_div">
</div>
<span class="class_span">
google
</span>
</li>
</ul>
CSS:
.class_div{
position: absolute;
border: 100px solid;
width:100px;
height:50px;
left:0px;
}
.class_span{
float: left;
}
Live DEMO
Add position: relative to the span so that you can apply z-index on it. Note that the z-index of your span must be higher than that of the div so that it appears above the div:
.class_div{
position: absolute;
border: 100px solid;
width:100px;
height:50px;
left:0px;
z-index: 1;
}
.class_span{
float: left;
position: relative;
z-index: 10;
}
Example
Edit:
As an alternative to float: left, you might consider using position: absolute and set left to 0px:
.class_span{
position: absolute;
left: 0;
z-index: 10;
}
You may need to set the top as well, and it may also be necessary to set a parent element's position to relative so that the span can be positioned relative to that parent element.
position:absolute will remove an element from the flow. You'll need to use position on .class_span too with a higher z-index.
Please check this.
http://jsfiddle.net/YMrLd/18/
The following CSS is there in the fiddle link.
.class_div{
position: absolute;
border: 100px solid;
width:100px;
height:50px;
left:0px;
}
.class_span{
position: absolute;
top: 100px;
left: 100px;
}
And let me know you need anything different.
Please attached a screenshot of your desired output if this doesn't help.
Related
i have 2 divs and a dl:
<div id="wrap">
<div id="header">
<dl id="site_nav_global_primary">
and this is my style:
#wrap {
margin:0 auto;
width:100%;
min-width:760px;
max-width:1003px;
overflow:hidden;
}
#header {
width:100%;
position:relative;
float:left;
padding-top:18px;
margin-bottom:29px;
}
#site_nav_global_primary {
float:right;
margin-right:18px;
margin-bottom:11px;
margin-left:18px;
}
Now i want to change site_nav_global_primary to have a full screen width without
changing the wrap and the header. but when i try:
#site_nav_global_primary {
position: absolute;
width:100%;
top:0px;
left:0px;
}
The navigation gets the 100% of the wrapper which is max 1003px width. i want it to
stretch to the maximum without changing the wrap and header divs.
Is this possible?
You could set both left and right property to 0. This will make the div stretch to the document width, but requires that no parent element is positioned (which is not the case, seeing as #header is position: relative;)
#site_nav_global_primary {
position: absolute;
top: 0;
left: 0;
right: 0;
}
Demo at: http://jsfiddle.net/xWnq2/, where I removed position:relative; from #header
You need to add position:relative to #wrap element.
When you add this, all child elements will be positioned in this element, not browser window.
I have similar situation. In my case, it doesn't have a parent with position:relative. Just paste my solution here for those that might need.
position: fixed;
left: 0;
right: 0;
Adding the following CSS to parent div worked for me
position: relative;
max-width: 100%
Make #site_nav_global_primary positioned as fixed and set width to 100 % and desired height.
This one also works. With this method, there is no need to interfere with positioning of parent divs. I have checked
#site_nav_global_primary {
position: absolute;
width: 100vw;
}
I don't know if this what you want but try to remove overflow: hidden from #wrap
I am wondering how I should organize things. I want my screen to be organized like this, and to be responsive:
So here is what I did:
.container-map {
position: relative;
}
.map-background {
z-index: 10;
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
}
.map-filter {
z-index: 100;
margin-left: 10%;
margin-top: 5%;
position: absolute;
}
.map-search-results{
position: absolute;
margin-top: 50%;
width: 100%;
}
<div class="container-map">
<div class="map-background"></div>
<div class="map-filter"></div>
<div class="map-search-results"></div>
</div>
It is working for the map and the filter, but for the search-results section, this seems very dirty to me.
It seems like adding a div around map-background and map-filter should be the solution, but how do I make its position "more important" than the absolute positions of the two other divs?
It's not clear what you mean by "more important" but I think I know what you mean. One of the main issues is the fact that the top map background and map filter are not positioned together but independently, and then just aligned with absolute positioning. This makes the style brittle and prone to errors from changes - whether that be changes in code or change in viewport etc.
Instead this might be the kind of thing you are after:
.top-container{
height:50vh;
position:relative;
}
.map-background {
height: 100%;
background-color:yellow;
outline:2px solid yellow;
}
.map-filter {
position: absolute;
top:15%;
left:10%;
min-height:50px;
min-width:200px;
background-color:lightblue;
outline:2px solid lightblue;
}
.map-search-results{
height:50vh;
background-color:red;
outline:2px solid red;
}
<div class="container-map">
<div class="top-container">
<div class="map-background">
Background
</div>
<div class="map-filter">
Filter
</div>
</div>
<div class="map-search-results">
Search Results
</div>
</div>
Now the top section is held in it's own container and only the filter is positioned absolutely, but that's absolutely relative to the wrapping container. Remember that position: absolute will position an element relative to the nearest ancestor with position: absolute or position: relative.[1]
This means that the top section is effectively 'grouped' and if the container is repositioned, whether that be with new CSS rules, changes to the DOM, changes to the the outer dimensions etc etc, then all the children should also be naturally repositioned as well (barring any other complications).
I have also cleaned up the code somewhat.
Your height definitions weren't working because a percentage height needs a parent with absolute height to work. Instead I have defined the two main blocks as having height: 50vh but you can set it to whatever you need.
There's also no need for z-index in this case (and z-index with absolute positioning is a recipe for confusion). The map-filter is the only thing 'on top' of something else and that will appear on top anyway since it is absolutely positioned and the map-background is not.
So if you take out the code I created for demonstration this is the core CSS:
.top-container{
height:50vh;
position:relative;
}
.map-background {
height: 100%;
}
.map-filter {
position: absolute;
top:15%;
left:10%;
}
.map-search-results{
height:50vh;
}
You don't need position: absolute for any of these:
<div class="container-map">
<div class="map-background">
<div class="map-filter"></div>
</div>
<div class="map-search-results"></div>
</div>
.container-map {
width: 400px; /*set as much as you like */
}
.map-background , .map-search-results {
display: block;
height: 50%;
}
.map-background {
padding: 15px; /* set as much as you want - to affect the height/position of .map-filter */
}
.map-filter {
width: 200px;
height: 100%; /* top/bottom padding of [.map-background] will create the height differential here */
}
First thing you need to know is when dealing with absolute it's better to use left, right, top & bottom,
Second thing you need to know is the relatively positioned element should have width and height in order to place the absolute positioned item inside it
Consider reading this article to know what is the difference between this properties ( relative & absolute )https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
I tried to make an example like the image in your question :
.container-map {
position: relative;
background:#000;
width:100vw;
height:100vh;
}
.map-background {
z-index: 10;
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
background:#ff0000;
}
.map-filter {
z-index: 100;
left: 5%;
top: 5%;
width:130px;
height:40%;
background:orange;
position: absolute;
}
.map-search-results{
position: absolute;
top: 50%;
width: 100%;
height:50%;
background:#00ff00;
}
<div class="container-map">
<div class="map-background"></div>
<div class="map-filter"></div>
<div class="map-search-results"></div>
</div>
I am trying to overlap the div2 over div1
http://jsfiddle.net/user1212/QsLVB/
<div id="div1"></div>
<div id="div2"></div>
#div1{
width: 200px;
height: 200px;
background-color: olive;
float: right;
position: relative;
z-index: 1;
}
#div2{
width:100px;
height: 100px;
background-color: orange;
float: right;
position: relative;
z-index: 2;
}
I need both to float to the right.
There's a number of ways you could get them to overlap.
First example http://jsfiddle.net/QsLVB/3/
Use negative margins.
#div2{
margin: 20px -100px 0 0;
}
Second example http://jsfiddle.net/QsLVB/4/
Just make the div a child of the other one. In this case z-index will not do anything, since the child will always be shown above the parent.
<div id="div1">
<div id="div2"></div>
</div>
Also, you can go other routes and use position: absolute instead and like top/right values, etc.
#div1{
width: 200px;
height: 200px;
background-color: olive;
position: absolute;
z-index: 1;
right: 0;
}
#div2{
width:100px;
height: 100px;
background-color: orange;
position: absolute;
z-index: 2;
right: 0;
}
Actually you don't need negative margins or anything like that - you can just modify your existing css to solve the problem. I ran it using my code and it works great. This is the solution I would choose in your case.
Firstly to layer anything you need to use position: absolute or position: fixed (which work similarly for our needs here).
Secondly, once using position absolute (or fixed) you can choose to position one or more edges of each div using top: right: bottom: and left:. You don't need any of them, but providing at least one will guarantee that that edge will appear at that pixel position within it's containing div.
Assuming you place these two divs within the body tag or at least don't need them to be further right than their outer containing div, you can set "right: 0;" for each div and they will work similarly to float: right for relative positioned divs (As in your original code), but since they are absolute positioned they can occupy the same space.
Then use z-index to control which one appears on top of the other.
cheers :-D
You could also set the left or right property of div2
DEMO using left
#div2 {
...
left: 200px;
}
Or instead of using float:right, use position:absolute in conjunction with right
DEMO
#div1, #div2 {
/* float: right; // removed */
position: absolute; /* changed from relative */
right: 0; /* added */
}
This is easy to accomplish if you put div2 inside div1, giving div2 an absolute position and right: 0 while its parent, div1, has a relative position.
See it in action here: http://jsfiddle.net/heGJt/
Here's the simplified CSS:
#div1 {
position: relative;
width: 200px;
height: 200px;
background-color: olive;
float: right;
}
#div2 {
width:100px;
height: 100px;
background-color: orange;
position: absolute;
right: 0;
}
And the HTML:
<div id="div1">
<div id="div2"></div>
</div>
This is hard to explain so I've put together this JSFiddle. I want the black div to cut through the blue box so that the black div is underneath the horizontal blue lines. So I'd like the <div class="title">Testing</div> to overlay the <div class="middleFifth">
http://jsfiddle.net/Zhxt9/
TIA in advance and sorry for the bad explanation!
You can relatively position the black div and set the z-index so that it is behind the blue div (also must specify z-index on blue div).
.title{
width:100%; float:left;
background-color:black;
position: relative;
top: -50px;
z-index: 0;
}
Updated Fiddle
Not entirely sure what you're aiming for, but you could try something like:
.title{
width:100%;
float:left;
background-color:black;
/* Below properties are what I added */
position: absolute;
top: 40px;
z-index: -10;
}
Obviously you should change the z-index to a more sensible value by setting it on your other elements, but I included it here for simplicity's sake.
Try:
.title{
margin-top: -50px;
}
http://jsfiddle.net/Zhxt9/1/
Or other options would be:
.title {
position: relative;
top: -50px;
}
or:
.title {
position: absolute;
top: 50px;
}
Depending on the rest of your page
i have came across a problem, i am fairly new to CSS but how do i make one div go over the other? This is my code:
#left_box
{
margin-top: 0px;
min-width: 10%;
max-width: 10%;
height: 800px;
background: #C90;
border: thin 5px #33CCFF;
position: absolute;
z-index:1;
left: 16px;
top: 1px;
float:none;
}
#bar_outside
{
margin-top:75px;
min-width:10px;
max-width:2000px;
height:55px;
background:#ff69b4;
border:#ff69b4: 5px;
position:static;
z-index:2;
}
thanks for your help!
If you want one div to be on top of the other, you can change the position: static in your #bar_outside to position:relative as the z-index property just works for relative, absolute or fixed. See the fiddle.
If you want the divs to be positioned one to the side of the other, use the float CSS attribute accordingly in both your CSS classes. See the fiddle.
You don't need position: absolute. Float left and define width