I would like to have the Wrapper-Top layer on top of the other one. I set z-index and position, which should be sufficient. Am I missing something? Here is the website: Thank you in advance.
EDIT: here is the code I used:
<body>
<div class="Wrapper-Top">
</div>
<div class="Wrapper-Middle">
hjklhjkhkjlhjkl
</div>
</body>
.Wrapper-Top {
min-width: 980px;
width: 100%;
height: 179px;
top: 0px;
left: 0px;
background:url(img/header-bg.png)
repeat-x 50% 0%;
z-index: 20;
}
.Wrapper-Middle {
min-width: 980px;
width: 100%;
height: 300px;
margin: 0 auto;
background: #eee;
top: 160px;
left: 0px;
position: absolute;
z-index: 10;
text-align: center;
}
You are missing a position attribute on .Wrapper-Top.
z-index on MDN
Initial value: auto
Applies to: positioned elements
Inherited: no
When it isn't present, your z-index:20 in .Wrapper-Top is doing nothing.
i think this is what you want..
<body>
<div class="Wrapper-Middle">
hjklhjkhkjlhjkl
</div>
<div class="Wrapper-Top">
</div>
.Wrapper-Top{ min-width: 980px;
width: 100%;
height: 179px;
top: 0px;
left: 0px;
background: url(img/header-bg.png) repeat-x 50% 0%;
z-index: 20;
position: absolute;
}
.Wrapper-Middle{min-width: 980px;
width: 100%;
height: 300px;
margin: 0 auto;
background: #eee;
top: 0px;
left: 0px;
z-index: 10;
text-align: center;
}
use position absolute both of this and give highest z-index value what you want to top of anothe one. like this
.Wrapper-Top{top: 0px; left: 0px; position:absolute; z-index: 2; }
.Wrapper-Middle{top: 160px; left: 0px; position: absolute; z-index: 1;}
Related
i'm struggling with CSS trying to create special shape.
This is the shape i wanna create
enter image description here
Do you have any solution ?
Thank's
How about this:
div {
position: relative;
height: 300px;
overflow: hidden;
border-radius: 25px;
}
.bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-color: blue;
transform: skewY(-6deg);
transform-origin: top right;
border-radius: 25px;
<div>
<div class="bg"></div>
</div>
I want to center absolute position div that has max-width.
#confirmation-popup {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 500px;
height: 150px;
padding: 12px;
background-color: #4e4e4e;
}
This does not work in IE.
max-width doesn't work in IE. better use width or you can use translate technique.
here is the snippet:
#confirmation-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;
max-width: 500px;
height: 150px;
padding: 12px;
background-color: #4e4e4e;
}
<div id="confirmation-popup">this is demo</div>
I have set up a modal for phots, so when i click on a small photo i get a larger photo up in a modal, the modal has position: fixed; and the modal-content has position: absolute; i can center it with margin: auto; left: 0; right: 0;but then the width goes all the way to the right and left, i want the modal content width to be the same as the photo inside it or the content of the modal-content
my code:
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding: 30px;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
position: absolute;
top: 50px;
margin-bottom: 30px;
margin: auto;
border: 1px solid #888;
}
.modalimg {
position: relative;
text-align: center;
}
.modalimg img{
max-width: 100%;
max-height: 400px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: relative;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
its maybe a bit messy now but i have tried alot of different things with no luck..
This is what I use when I center an absolute-positioned element, this works for me all the time:
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
here you are please
.element {
position: absolute;
top: 15px;
z-index: 2;
width: 40%;
max-width: 960px;
min-width: 600px;
height: 60px;
overflow: hidden;
background: #fff;
margin: 0 auto;
left: 0;
right: 0;
background: red;
color: #fff;
text-align: center;
}
<div class="element">
text..
</div>
.modal-content {
background-color: #fefefe;
position: absolute;
top: 50px;
left: 50px;
right: 50px;
bottom: 50px;
border: 1px solid #888;
}
to align absolute div to center
left: 0;
right: 0
text-align: center
this will align the div in center.
Here's a possible solution that uses:
absolute positioning on the content container (.modal-content)
doesn't use absolute|fixed on the actual content
The content container (.modal-content) will grow along with its content. Finally, it's moved back to the middle using transform: translate(-50%, -50%);:
.modal {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
border: 2px solid red;
transform: translate(-50%, -50%);
}
<div class="modal">
<div class="modal-content">
<img src="//placehold.it/200x200" alt="">
</div>
</div>
Demo
Try before buy
I want to show <div class="fe"></div> in perfect center. When I use left: 50%; its works but not showing in perfect center.
.fe {
position: fixed;
bottom: 0;
left: 50%;
width: 150px;
height: 50px;
background-color: black;
}
Method 1:
Add transform: translateX(-50%).
body {
background: #ccc;
}
.fe {
transform: translateX(-50%);
background-color: black;
position: fixed;
width: 150px;
height: 50px;
bottom: 0;
left: 50%;
}
<div class="fe"></div>
Method 2:
Use negative margin equal to half of element width. i.e as you have width of .fe 150px so use margin-left: -75px
body {
background: #ccc;
}
.fe {
background-color: black;
margin-left: -75px;
position: fixed;
width: 150px;
height: 50px;
bottom: 0;
left: 50%;
}
<div class="fe"></div>
You can translate the element to move 50% left its own size:
transform:translateX(-50%);
Like this:
.fe {
position: fixed;
bottom: 0px;
left: 50%;
transform:translateX(-50%);
width: 150px;
height: 50px;
background-color: black;
}
instead of setting left to 50%, set left=0 and right=0 and margin=auto.. this will center automatically to center.
.fe {
position: fixed;
bottom: 0px;
left: 0;
right: 0;
margin: auto;
width: 150px;
height: 50px;
background-color: black;
}
Try using margin-left and margin-right as shown below
margin-left: auto;
margin-right: auto;
Setting both these to auto will center the division. For further info in this regard, you can refer this tutorial.
you can use property align="center" for div
.fe{ align="center"
}
Or in div you can define
<div class="fe" align="center"></div>
Try this Add transform: translateX(-50%); property to your code
.fe {
position: fixed;
bottom: 0px;
left: 50%;
width: 150px;
height: 50px;
background-color: black;
transform: translateX(-50%);
margin:auto;
}
I have an absolute positioned div with an iFrame inside (doesnt work for silverlight objects either). For some reason it doesnt expand to fill its parent, which it should.
If you replace the iframe with a div with the same ID it works correctly.. Whats the problem?
<div id="rightpanel">
<iframe id="silverlightControlHost" src="http://google.com"></iframe>
</div>
#rightpanel {
background: green;
top: 32px;
left: 190px;
bottom: 0;
padding: 20px!important;
position: absolute;
padding-top: 0px;
overflow: auto;
min-width: 700px;
}
#silverlightControlHost {
background: red;
border: 0;
position: absolute;
left: 0;
top: 0;
z-index: 1;
right: 0;
bottom: 0;
}
http://jsfiddle.net/ZfG3g/
sticking the following on the iframe seems to work (in the fiddle at least anyway):
#silverlightControlHost {
width:100%;
height:100%;
... rest of your css ...
}
http://jsfiddle.net/ZfG3g/1/
you may try this
you forget to mention iframe width and height
check the below code this is covering the full parent block
<div id="rightpanel">
<iframe id="silverlightControlHost" src="http://google.com" width="740" height="630"></iframe>
</div>
<style>
#rightpanel {
background: green;
top: 32px;
left: 190px;
bottom: 0;
padding: 20px!important;
position: absolute;
padding-top: 0px;
overflow: auto;
min-width: 700px;
}
#silverlightControlHost {
background: red;
border: 0;
position: absolute;
left: 0;
top: 0;
z-index: 1;
right: 0;
bottom: 0;
}</style>