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:
Related
I encountered this problem when I was fixing my footer. Before it worked perfectly fine.
This is the code:
.light {
position: absolute;
top: 97.5%;
left: 50%;
transform: translateX(-50%);
width: 700px;
margin-left: -10px;
opacity: 0;
}
FOOTER:
.contacts {
display: grid;
place-items: center;
background-color: rgb(14, 14, 14);
margin-top: 10rem;
bottom: 0;
width: 100%;
position: fixed;
}
I didn't try anything else, because I just couldn't understand how to get out of this problem
Before I did anything to the footer it worked perfectly fine, but after I fixed the footer, the light wasn't going over the footer. The code I'm using now for the footer(doesn't work)
width: 100%;
position: fixed;
The code I used before, when it worked: position: absolute;`
For the element you want above your footer, you want to give it a z-index tag, and for the element you want layered behind you, you want to give it a lower z-index number,
for example:
.light {
position: absolute;
top: 97.5%;
left: 50%;
transform: translateX(-50%);
width: 700px;
margin-left: -10px;
opacity: 0;
z-index: 1;
}
.contacts {
display: grid;
place-items: center;
background-color: rgb(14, 14, 14);
margin-top: 10rem;
bottom: 0;
width: 100%;
position: fixed;
z-index: 0;
}
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;
}
I want to make responsive image once the size becomes smaller it moves to bottom from the top right position. also I'm using material ui but can't find any help of it in this
.my-photo{
height: 300px;
position: absolute;
right: 50px;
top: 150px;
border-radius: 50%;
}
#media(max-width:800px){
.my-photo{
height: 250px;
position: absolute;
right:auto ;
top: 500px;
border-radius: 50%;
}
}
try using the bottom style:
.my-photo{
height: 300px;
position: absolute;
right: 50px;
top: 150px;
border-radius: 50%;
}
#media(max-width:800px){
.my-photo{
height: 250px;
right: auto;
bottom: 0;
}
}
plus try not to copy unnecessary styles in #media
I'm trying to center an element with percent, but it don't work! Have I missed something or is the way I'm doing it impossible?
When I'm using this setting, the element is almost touching the top of the browser area.
.modal-box {
position: fixed;
z-index: 1000;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
margin-top: -25%;
margin-left: -25%;
}
Because everything is in %, you should just define width + height and top + left positions, not margin:
.modal-box {
height: 50%;
left: 25%;
position: fixed;
top: 25%;
width: 50%;
z-index: 1000;
}
JsFiddle: http://jsfiddle.net/ghorg12110/ob29nn2u/
html,
body {
width: 100%;
height: 100%;
}
.modal-box {
background-color: red;
height: 50%;
left: 25%;
position: fixed;
top: 25%;
width: 50%;
z-index: 1000;
}
<div class="modal-box"></div>
Instead of margins, use a transform. This will center the box regardless of height/width.
.modal-box {
position: fixed;
z-index: 1000;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
background: red;
transform: translate(-50%, -50%);
}
<div class="modal-box"></div>
If you want to center with percents, you will need to know the width of an element.
so say modal-box was 300px wide, you would do something like this:
.modal-box{
width:300px;
position:fixed;
left:50%;
margin-left: -150px; /*1/2 of your divs width*/
}
Why are you adding
margin-top: -25%;
margin-left: -25;
That negates the position: fixed of what you were trying to achieve. Remove those two lines and you will see how you can have your fixed position of the element.
If you want it relative to the viewport (irrespective of parent), then make use of the viewport-relative-lengths
.modal-box {
border: 1px solid #000;
position: fixed;
z-index: 1000;
width: 50vw; height: 50vh;
top: 50vh; left: 50vw;
margin-top: -25vh; margin-left: -25vw;
}
<div class="modal-box"></div>
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