i need to build a frame all around mi contents that would scroll under the frame
i made a top margin a bottom and a left and right margin
it seems to work correctlly but some times between bottom and middle or top and middle i get a void pixel
and on mobile device, without viewport set it get a little worst
i don't have other idea on how make the same thing in a better way
here an example link
http://jsfiddle.net/zBAPX/
#mask-center-container {
z-index: 1000;
position: fixed;
top: 10%;
bottom: 4%;
left: 0;
right: 0;
width: 100%;
margin: 0;
padding: 0;
}
#mask-center-container-sx {
height: 100%;
width: 21%;
background: #000;
opacity: 0.5;
margin: 0;
padding: 0;
}
#mask-center-container-ce {
height: 100%;
width: 56%;
margin: 0;
padding: 0;
}
#mask-center-container-dx {
height: 100%;
width: 22%;
background: #000;
opacity: 0.5;
margin: 0;
padding: 0;
}
#mask-top {
z-index: 3000;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 10%;
width: 100%;
background: #000;
opacity: 0.5;
margin: 0;
padding: 0;
}
#mask-bottom {
z-index: 3000;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 4%;
width: 100%;
background: #000;
opacity: 0.5;
margin: 0;
padding: 0;
}
I only know of one way to effectively click 'through' an element, and that is to use the experimental pointer-events property. Here's a writeup from CSS Tricks:
http://css-tricks.com/almanac/properties/p/pointer-events/
One major flaw: no IE support prior to IE11.
Related
In order to translate an element completely out of view, I used transform: translate(0, -100%);. Its children however, if you resize the window compressing its height far enough, will gradually reappear. I have no clue why they do this, and I'd like someone to shed light on the reason why this happens. Here's the fiddle.
HTML
<body>
<div id="background">
<div id="circle1"></div>
<div id="circle2"></div>
</div>
</body>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#background {
background-color: red;
height: 100%;
width: 100%;
position: fixed;
transform: translate(0, -100%);
}
#circle1 {
background-color: yellow;
height: 500px;
width: 500px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
border-radius: 50%;
z-index: 0;
}
#circle2 {
background-color: aqua;
height: 400px;
width: 400px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
border-radius: 50%;
z-index: 1;
}
you have fixed heights for your cirecles (500px / 400px). When #background's height becomes less than that by resizing the window, the circles would overflow #background vertically.
The translatemovement by 100% refers to #background, so you still see the part of the circles that would overflow #background without the translate setting.
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
If I have three divs, each with fixed position. How can I get .inner to appear above the .overlay?
HTML
<div class="container">
<div class="inner">The inner container</div>
</div>
<div class="overlay"></div>
CSS
.container {
position: fixed;
z-index: 1;
background: red;
height: 100px;
width: 100%;
}
.inner {
z-index: 3;
position: fixed;
margin-top: 10px;
width: 100%;
background: yellow;
height: 30px;
}
.overlay {
z-index: 2;
position: fixed;
background: blue;
opacity: 0.5;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
In this JS fiddle, you can see how the "yellow" element renders below the overlay. Is there any change possible while keeping the .container fixed?
http://jsfiddle.net/4ne83oa4/8/
Well, if you must keep the markup as is, you can just play around with some pseudo classes for the .container class.
Markup stays the same, the CSS chages a bit like this: check js fiddle
.container {
position: fixed;
background: red;
height: 100px;
width: 100%;
z-index: 1;
}
.container:after,
.container:before{
content: '';
position: fixed;
}
.container:after{
z-index: -1;
background: red;
height: 100px;
width: 100%;
}
.container:before{
z-index: 1;
background: blue;
opacity: 0.5;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.inner {
position: fixed;
margin-top: 10px;
width: 100%;
background: yellow;
height: 30px;
z-index: 1;
}
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:
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>