Can not make my bottom div to show under Positions Absolute - css

My divs with position:absolute or relative keep showing on top of my other divs , even so that i already gave them a float , is there anyway to clear the float state of the positions:relative or absolute?
.topo {
position: relative;
}
.area-logo {
position: absolute;
width: 798px;
background-color: green;
left: 0px;
top: 0px;
background: url(topo-imagem-principal.png);
height: 250px;
}
.area-menu {
background: url(topo-imagem-lateral.png);
position: absolute;
top: 0px;
right: 0px;
width: 639px;
height: 250px;
}
.bottom-div {
width: 50%;
float: left;
}
bottom-div {
width: 50%;
float: right;
}

Related

Can't overlap more than one image on another?

I want to have my three images on my page overlaped over another and then make shadow-box on the ones that are overlapping. The first image (.hem) is overlapping the second one (.sol) but I can't get (.sol) to overlap (.vatten). Heres my css.
#projekt {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 100vh;
}
.hem {
width: 28%;
position: relative;
margin-left: -65px;
}
.sol {
width: 23%;
margin-left: -35px;
margin-bottom: 40px;
}
.vatten {
width: 23%;
margin-left: -65px;
margin-bottom: 75px;
}
(#projekt) is just the div for my under classes.
Heres the Html:

Z Index a pseudoelement behind it's parent

I'm trying to z index an element behind it's parent but it isn't working.
Here's my pen:
http://codepen.io/Tiger0915/pen/OPXway
and my SCSS:
div {
width: 400px;
height: 250px;
position: relative;
background: grey;
margin: 100px auto;
z-index: 5;
&:after {
content: ":after";
position: absolute;
width: 100%;
height: 100%;
top: -20px;
right: -70px;
background: lightgrey;
z-index: 4;
}
}
how do I get my :after to appear behind my parent div?
I think I figured it out. Like ajp15243 said, I can't position a child element behind a parent element.
So I ended up creating 2 different pseudoelements, a :before and an :after, both of which appear behind the other children of my div (using negative z indexes), and I can put the after at a lower z index than the before to get the effect I wanted.
div {
width: 400px;
height: 250px;
position: relative;
margin: 100px auto;
z-index: 5;
&:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
background: grey;
z-index: -1;
}
&:after {
content: ":after";
position: absolute;
width: 100%;
height: 100%;
top: -20px;
right: -70px;
background: lightgrey;
z-index: -2;
}
}
Here's the pen:
http://codepen.io/Tiger0915/pen/XJKBoq

z-index attribute not working on container with image

do not know what I might be doing wrong, I tried to put it this way:
.container-image{
background: url('http://i.imgur.com/Dl8UBO7.png');
width: 226px;
height: 169px;
display: inline-block;
position: relative;
z-index: 20; // dont work
}
.container-image img{
position: absolute;
left: 14px;
top: 13px;
width: 199px;
height: 141px;
z-index: 10; // dont work
}
jsfiddle
I need the image is behind the edge (.container-image)
Put a container around the border div and the image. http://jsfiddle.net/7fqAu/2/
<div class='example'>
<div class="container-image"></div>
<img src="http://i.imgur.com/T0KMwIs.jpg">
</div>
body {
background: red;
}
.container-image {
background: url('http://i.imgur.com/Dl8UBO7.png');
width: 226px;
height: 169px;
position: relative;
z-index: 20;
}
.example {
width: 226px;
height: 169px;
position: relative;
}
.example img {
position: absolute;
left: 14px;
top: 13px;
width: 199px;
height: 141px;
z-index: 10;
}
You could add the border image to .container-image:after instead of as a background to .container-image - no need for z-index at all then.
jsfiddle here

Bootstrap 3 Modal auto size, 30 pix from sides

I'm trying to build modal window that will be positioned absolute, 30 pixels from edge of screen.
I've build this css:
.modal {
overflow: hidden;
}
.modal-dialog {
position: absolute;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
margin: 0;
}
#media (min-width: 768px) {
.modal-dialog {
width: auto;
margin: 0;
}
}
.modal-footer {
position: absolute;
bottom: 0;
left:0;
right:0;
}
.modal-header, .modal-body, .modal-footer {
padding: 10px;
}
.modal-content {
height: 100%;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.modal-backdrop {
background-color: #fff;
}
.modal-header .close {
margin-top: 3px;
}
.btn {
border-radius: 0;
}
and my results so far looks like this: http://jsfiddle.net/Misiu/LT3YM/
My modal window is correctly positioned, but modal-body isn't sizing, i would like it to take rest of available height of modal - from header to footer.
I can position absolute modal-body and add top and bottom properties, but I'm wondering if there is a better way of doing this.
My solution for now is this code:
.modal-body {
position: absolute;
top: 46px;
bottom: 54px;
overflow-y: scroll;
}
and demo of what I have:
How can I modify my code better so that modal-body will always be correct height? Is positioning it absolutely only option?
http://jsfiddle.net/LT3YM/4/
You should change the values in .modal-dialog. You can make bottom and right 30px too
.modal-dialog {
position: absolute;
top: 30px;
bottom: 50px;
left: 30px;
right: 50px;
margin: 0;
}
Alternatively, this uses 3%: http://jsfiddle.net/LT3YM/7/
.modal-dialog {
position: absolute;
top: 3%;
bottom: 3%;
left: 3%;
right: 3%;
margin: 0;
}
Looks like this:

width not inheriting from parent?

I'm attempting to have an overlay of an image. I've done it a bit before but for some reason today I'm obviously forgetting something. It seems to take the width of the entire page and not its parent:
#work_item {
position: relative;
width: auto;
}
#work_item img {}
#work_item a {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 30;
height: 100%;
width: 100%;
background: #000;
color: #FFF;
}
<div id='work_item'>
<img src="" />
Click Here!
</div>
Any Help?
#work_item {
display: inline-block;
position: relative;
left: 0px;
top: 0px;
z-index: 1;
height: auto;
width: auto;
}
#work_item img {
position: relative;
z-index: 1;
left: 0px;
top: 0px;
}
#work_item a {
display: block;
position: absolute;
top: 0px;
left: 0px;
z-index: 30;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.8);
color: #FFF;
}​
<div id='work_item'>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfMwj05-cLtN4hGPTSKJcsElDOeNTW65rlmQKXzRo5ZCbFmvuY0dccZMU" />
Click Here!
</div>
Demo: http://jsfiddle.net/38v3h/
Add this code, if you meant the #work_item:
#work_item {
position: relative;
width: auto;
display: inline-block;
}
Fiddle: http://jsfiddle.net/CRY3g/
div is a block element which occupy the whole width of the its parent regardless of the width of its content. There are many ways to make the div #work_item to wrap the content.
display inline-block;
#work_item {
position: relative;
width: auto;
display inline-block;
}
you can also float the div:
#work_item {
position: relative;
width: auto;
float: left;
}

Resources