Hello
please have a look at my jsfiddle.
The content of the inner div-element is scrollable.
Each grey symbol has a margin-left. When I scroll the content the symbols shouldn't be fixed to the background.
It should be scrollable with the position.
Have you got an idea how I achieve that effect?
Keep in mind that positioning is relative to the closest positioned parent.
When you are assigning an absolute position to the "symb" class you are positioning them relative to the document rather than their parent.
Simply adding "position: relative;" to your div.tl element will set the parent div as positioned without moving it and the "symb" elements will act the way I think you expect them to.
Your new .tl definition should be:
.tl {
width: 500x;
height: 80px;
background-color:grey;
position: relative;
}
Furthermore, I'm assuming that you have some need to position these absolutely. You could achieve similar results by simply removing the "position: absolute" portion of your .symb definition.
You are setting a margin, not a position, so you don't need to bother with positioning at all in your example case.
I am not sure what do you need. You had an error in your last "symb" - you missed 'p' in 'px'. Try this?
<div class ="outer">
<div class="inner">
<div class="tl">
<div class="box" style="width: 315px;">
<div class="symb" style="margin-left: 0px;"></div>
<div class="symb" style="margin-left: 15px;"></div>
<div class="symb" style="margin-left: 20px;"></div>
</div>
</div>
</div>
</div>
.outer {
width:50%;
}
.inner {
overflow-x:scroll;
}
.tl {
width: 500x;
height: 80px;
background-color:grey;
}
.box {
float: left;
height: 61px;
}
.box .symb {
float:left;
width: 5px;
height: 5px;
background-color: #cccccc;
z-index: 999;
margin-top: 10px;
}
Use
position: relative;
Not
position: absolute;
Just try with the following CSS:
.box .symb {
position: relative;
float: left;
position: inline-block;
width: 5px;
height: 5px;
background-color: #cccccc;
z-index: 999;
margin-top: 10px;
}
Related
I have a series of divs with z-index:20 (this is a must be for visual styling reasons), but inside one of them, I have a datepicker which stands as position:absolute floating above everything. I've assigned z-index: 1000 as a great value in order to achieve this.
I discovered the inner z-index this doesn't work because of the parent container. Is there such a hack to workaround this ?
The parent container must have such z-index in order to be above a sibling div, but the datepicker, which is inside one of the boxes, must be on top of everything, and now it is hiding under the next box.
This is the codepen with an actual example: http://codepen.io/anon/pen/jWZMPw
The problem is that .box creates a stacking context because it's a positioned element with non-auto z-index.
Don't do that. Remove
.box {
z-index: 20;
}
.banner {
padding: 10px;
background: #454545;
position: fixed;
width: 100%;
}
.box {
position: relative;
float: left;
margin-left: 20px;
min-width: 100px;
min-height: 100px;
border: 1px solid #999;
padding: 20px;
background: #45e;
}
.box:first-child {
margin-left: 0;
}
.dtpicker {
background-color: #34ed22;
padding: 20px;
min-width: 100px;
min-height: 100px;
position: absolute;
left: 50px;
z-index: 50;
}
<div class="banner">
Something behind
</div>
<div class="box" >
Box
</div>
<div class="box" >
Box
</div>
<div class="box" >
Box
<div class="dtpicker">
Dt picker
</div>
</div>
<div class="box" >
Box
</div>
I recommend reading What No One Told You About Z-Index.
The question is: is it possible? I have a div with relative position. Inside this div, I have another div with position: absolute and top: whatever.
This absolute positioned div overlaps content in parent div without any problems, but another relative position div (outside parent) doesn't even care. Before this question I googled as I much as I could, so I'm for 90% sure that it's impossible, or I'm on a wrong way, but I need to be sure.
Here is an example http://jsfiddle.net/MNLbZ/2/
HTML
<div class="main">
<div class="content">11112222233</div>
<div class="abs"></div>
</div>
<div class="main"></div>
CSS
.main {
background: green;
position: relative;
height: 100px;
width: 100px;
z-index: 100;
}
.content {
position: relative;
z-index: 500;
width: 100px;
}
.abs {
position: absolute;
width: 50px;
height: 300px;
top:0;
right: 0;
background: red;
z-index: 999;
opacity: .5;
}
The z-index of the second .main div must be lower than that of the first div that contains the absolute div:
add a class to the second main
<div class="main">
<div class="content">11112222233</div>
<div class="abs"></div>
</div>
<div class="main second"></div>
then use this style:
.second {z-index:99;}
Example
I am trying to float some elements and apply clearfix so that the parent element can expand to the height and width of the children.
So, I simply set up the layout as per this fiddle: http://jsfiddle.net/fMjEx/
I then wanted to float the elements inside .bar. This is usually quite straight forward:
Float the elements.
Clear fix the parent using pie-clearfix or overflow: auto.
However, I ran into these problems:
If I use pie-clearfix, the element .picture which is next to .bar is also included in the clearing: http://jsfiddle.net/6C7WD/
If I use overflow: auto or overflow: hidden, the width of the .bar no longer spans the width of the document: http://jsfiddle.net/fv2gA/
Initially, one solution I had was to make .picture position: absolute. However, the problem with this approach is that the element is taken out of the flow.
In the layout, the height of .bar is variable depending on the content inside. I would like to give .bar and .picture a margin-bottom so that anything that comes after them is pushed downwards by that amount depending on whether .bar or .picture has a greater height.
This rules out using position: absolute on .picture as a solution.
Are there any solutions that satisfy the following?
Clear only floats within .bar.
Does not remove any elements from the flow.
This is the solution I ended up with:
Added a wrapper to the markup:
<div class="container">
<div class="group"> <-------------------------- This is the wrapper
<div class="picture"></div>
<div class="bar">
<div class="info"> some text goes here</div>
<div class="buttons">some other content goes here</div>
</div>
</div>
</div>
And the CSS:
.picture{
width: 100px;
height: 100px;
float: left;
background: green;
margin-left: 100px;
margin-top: 10px;
z-index: 2;
position: relative;
}
.bar{
background: blue;
margin-top: -80px;
overflow: auto;
width: 100%;
float: left;
z-index: 1;
position: relative;
}
.group{
margin-bottom: 10px;
}
.group:after {
clear: both;
content: "";
display: table;
}
.info, .button{
float: left;
margin-left: 200px;
}
.container{
overflow: auto;
}
Fiddle of the above: http://jsfiddle.net/c6Lng/
I have the following HTML code:
<div class="outer_container">
<div id="imgContainer">
<img src="/some/image" />
</div>
<div id="slogan">
<span class="quote">Some text here</span>
</div>
<div id="footer" class="gray_top_border">
Some text here
</div>
</div>
And this is my CSS:
.outer_container {
background-color:#FFFFFF;
margin:0 auto;
width:960px;
}
#slogan {
font-size: 3em;
position: relative;
z-index: 999;
bottom: 50px;
left: 50px;
}
#footer {
border-top:1px solid #B5B5B5;
min-height:50px;
padding:10px;
}
Using this code, I get a 3em gap between image and footer.
If I change position from relative to absolute, the gap problem is gone. But then the top / left position is relative to the browser window, and not within the DIV container.
How can I float text over the image without creating this gap?
This does it:
#slogan {
font-size: 3em;
position: relative;
height: 0;
overflow: visible;
z-index: 999;
bottom: 50px;
left: 50px;
}
can you try the below css.
#slogan {
font-size: 3em;
position: relative;
z-index: 999;
margin-top:-20px;
}
#footer {
position:absolute;
bottom:10px
border-top:1px solid #B5B5B5;
min-height:50px;
padding:10px;
}
"Position: relative" still reserves the area the text would have been in. This means it can make some weird padding/margin issues once in a while.
"position: absolute" does not reserve the area. I recommend just using that instead of hacking around with the relative one.
http://www.w3schools.com/css/css_positioning.asp
You can wrap the whole thing in a new div that's position: relative then your absolute pixels will go out from that instead of screen 0,0.
"An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is ."
I can't select one of those dropdrown-links, although the #header div has a higher z-index than the rest. All relevant divs are in the same level but do not align properly:
http://img32.imageshack.us/img32/4245/zindex.png
<div id="header">
<div id="navigation">
</div>
</div>
<div id="sidebar"></div>
<div id="content">
...
</div>
#header {
width: 915px;
height: 76px;
z-index: 5;
}
#content {
width: 677px;
height: 412px;
margin-left: 202px;
z-index:1;
}
#sidebar {
float: left;
width: 200px;
height: 448px;
z-index: 2;
}
#navigation {
height: 28px;
width: 915px;
float: right;
}
Add position relative to the elements that need to obey z-index. From w3schools.com
z-index only works on positioned
elements (position:absolute,
position:relative, or position:fixed).
Although, from your image I do not see a reason to be using z-index other than maybe the drop down navigation.
z-index only applies to positioned (i.e. position: /* not static */) elements.
Change the positioning property valud.