Seems Google Chrome 36 is broken and does not understand top:50% in my example.
IE 11, Opera 12.17 and Firefox 31 work just fine. Chrome and Safari are broken (and I guess other WebKit/KHTML browsers are broken too).
<div class="box_outer">
<div class="box_inner">
<div class="box">
<h1>Hello</h1>
</div>
</div>
</div>
<style>
.box_outer {
bottom: 0px;
left: 0;
position: fixed;
right: 0;
top: 0;
}
.box_inner {
top: 50%;
left: 50%;
width: 0;
height: 0;
position: relative;
}
.box {
position: absolute;
left: -220px;
width: 400px;
top: -220px;
height: 400px;
background-color: red;
}
</style>
I know I can do the following:
.box_outer {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
But this is not a solution to the problem just a different approach.
How can I fix it for Chrome with minimal changes?
You can test it on JSBIN here
Ok, here's the fix. For me it seems like a bug in Webkit browsers.
.box_outer {
bottom: 0px;
left: 0;
position: fixed;
right: 0;
top: 0;
}
.box_inner {
top: 50%;
left: 50%;
width: 0;
height: 0;
position: absolute; /* INSTEAD OF relative */
}
.box {
position: absolute;
left: -220px;
width: 400px;
top: -220px;
height: 400px;
background-color: red;
}
I am not clear what you are trying to do here, but the result that you are getting in other browsers can be achieved in crome using:
.box_inner {
top: 50%;
left: 50%;
width: 0;
height: 0;
position: fixed;
}
Related
I am having some trouble with safari and displaying a popup over a navigation element. For some reason the given z-index is ignored and the popup is hidden behind the navigation.
Here is the relevant HTML code:
<section class="application">
<header class="application-header"></header>
<nav class="application-navigation"></nav>
<div class="application-content">
<div class="wizard-background">
<div class="wizard-content">TEST TEST TEST TEST</div>
</div>
</div>
And here the less code
.application {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
&-navigation {
position: absolute;
background: green;
left: 0;
width: 200px;
bottom: 0;
top: 50px;
}
&-header {
position: absolute;
background: red;
top: 0;
left: 0;
right: 0;
height: 50px;
}
&-content {
position: absolute;
z-index: 81;
left: 200px;
top: 50px;
bottom: 0;
right: 0;
background: yellow;
overflow-y: auto;
}
}
.wizard {
&-background {
z-index: 100;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
background: rgba(0, 0, 0, 0.1);
}
&-content {
position: fixed;
top: 100px;
left: 150px;
width: 200px;
height: 200px;
background: white;
z-index: 101;
}
}
When you view this code in safari you can see that the "wizard-content" is partly hidden behind the "navigation-content". If you remove the z-index from "application-content" it works fine.
I also prepared a CodePen where you can see result, but you have to use safari to see the effect I mean.
Can someone explain what I am doing wrong? Or how safari works different than all other browsers regarding z-index.
I'm not sure why Safari messes up the z-index like that, but if you add transform: translate3d(0, 0, 0); to a parent element it usually starts acting normal.
here is a fork to your CodePen.
In this case I added it to .application
.application {
transform: translate3d(0, 0, 0);
}
I set up 2 divs with some backgrounds and I want to set div2 under div 1, but I don't know how to do this, please help. Now, div2 is over div1 and div1 is invisible on this website.
.div1 {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
margin-left: -51%;
}
.div2 {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
margin-left: -51%;
}
<div class='div1'>Some very important text...</div>
<div class='div2'>Not so important text...</div>
Maybe this helps you, I added a top: 100%; to div2.
.div1 {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
margin-left: -51%;
background-color: red;
}
.div2 {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 100%; /*Changed*/
left: 50%;
right: 0;
bottom: 0;
margin-left: -51%;
background-color: blue;
}
.div1::-webkit-scrollbar {
display: none;
}
.div2::-webkit-scrollbar {
display: none;
}
<div class="div1">a</div>
<div class="div2">a</div>
I have a problem with my code I have mentioned this - overflow: hidden in the css but still my video is not shown below the text.I have mentioned the following in my css :
fullscreen-bg {
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow:hidden;
`enter code here`z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This wasn't written by me but it should give you a rough idea how to do it,
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}
.stopfade {
opacity: .5;
}
source:
https://codepen.io/dudleystorey/pen/knqyK
So, I have this example of how my three divs are suppose to be. I've been playing around with the position:relative in the container and then position:absolute in the three children divs. The thing is I feel like its not the best approach. What do you guys think?
This is the code I currently have:
.container{
position: relative;
height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
}
#round-image{
position: absolute;
left: 35%;
top: 30%;
z-index: 20;
width: 300px;
height: 300px;
border-radius: 50%;
}
I don't see any problem with using absolute positioning in this case, if it meets your needs, it's just okay to use it.
However it seems the third DIV #round-image is not aligned properly at the middle, because of using a mix of absolute length px and percentage for sizing/positioning the box.
Considering the following markup, the issue can be fixed by:
1. using negative margins on on the third DIV.
html, body {
margin: 0;
height: 100%;
width: 100%;
}
.container{
position: relative;
min-height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #222;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #999;
}
#round-image{
position: absolute;
left: 50%;
top: 50%;
z-index: 20;
width: 300px;
height: 300px;
margin-top: -150px;
margin-left: -150px;
border-radius: 50%;
background-color: tomato;
}
<div class="container">
<div id="top-div"></div>
<div id="bottom-div"></div>
<div id="round-image"></div>
</div>
2. Or using calc() function:
html, body {
margin: 0;
height: 100%;
width: 100%;
}
.container{
position: relative;
min-height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #222;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #999;
}
#round-image{
position: absolute;
left: calc(50% - 150px);
top: calc(50% - 150px);
z-index: 20;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: tomato;
}
<div class="container">
<div id="top-div"></div>
<div id="bottom-div"></div>
<div id="round-image"></div>
</div>
3. Or using CSS transform:
html, body {
margin: 0;
height: 100%;
width: 100%;
}
.container{
position: relative;
min-height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #222;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #999;
}
#round-image{
position: absolute;
left: 50%;
top: 50%;
z-index: 20;
width: 300px;
height: 300px;
transform: translate(-50%, -50%); /* vendor prefixes ommited due to brevity */
border-radius: 50%;
background-color: tomato;
}
<div class="container">
<div id="top-div"></div>
<div id="bottom-div"></div>
<div id="round-image"></div>
</div>
It's worth noting that the two last methods are only supported on IE9+.
You want the circle in the middle I would imagine?
If you don't care for validation then you can simply put center tags and the div you want in the middle between them tags or you can use the "Margin" aspect of CSS to align it in the center
The only thing, I think is in a need of improvement is the way you center positioned the circle element. Giving it 50% absolute positions and half-width negative margins would ensure it would be in a good place whatever the dimensions are.
.container{
position: relative;
height: 700px;
width: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background: black;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: grey;
}
#round-image{
position: absolute;
left: 50%;
top: 50%;
z-index: 20;
width: 300px;
height: 300px;
margin-left: -150px;
margin-top: -150px;
border-radius: 50%;
background: pink;
}
<div class="container">
<div id="top-div">
</div>
<div id="round-image">
</div>
<div id="bottom-div">
</div>
</div>
How to set up the browser scrollbar to scroll part of a page? (higher than footer part hidden) just like http://i-donline.com/
http://jsfiddle.net/hVvfn/2/
.header{
position: fixed;
left: 0;
top: 0;
width: 1000px;
height: 100px;
background: blue;
z-index: 1;
}
.contentwrap{
position: absolute;
left: 0;
top: 100px;
width: 1000px;
height: 250px;
background: ;
}
.footer{
position: fixed;
left: 0;
top: 350px;
width: 1000px;
height: 300px;
background: blue;
}
.row{
position: relative;
left: 0;
top: 0;
width: 800px;
height: 250px;
border: purple 1px solid;
background: gray;
}
There is a library called as iScroll. Used just for these kind of things. You can check it out I think it will help. In fact I have used it many times. Works like charm. Here is the link:
iScroll here