In this example is it possible to click the blue box without affecting the red box without using js?
http://codepen.io/YikesItsMikes/pen/MaPBJy
HTML
<div id="boxone">
<div id="boxtwo"></div>
</div>
CSS:
#boxone{
width: 200px;
height: 200px;
background: red;
margin: 50px auto;
padding: 10px;
}
#boxtwo{
width: 100px;
height: 200px;
background: blue;
z-index: 999;
}
#boxone:active{
background: yellow;
}
#boxtwo:active{
background: green;
}
Not possible with the current HTML where #boxone wraps #boxtwo.
You could layer the HTML so that #boxtwo is on top of #boxone without nesting it like this;
http://codepen.io/anon/pen/vNVaWV
.wrapper{
width: 200px;
margin: 50px auto;
position: relative;
}
#boxone{
width: 200px;
height: 200px;
background: red;
position: relative;
padding: 10px;
display: inline-block;
}
#boxtwo{
width: 100px;
height: 200px;
background: blue;
z-index: 999;
position: absolute;
top: 10px;
left: 10px;
}
#boxone:active{
background: yellow;
}
#boxtwo:active{
background: green;
}
<div class="wrapper">
<div id="boxone"></div>
<div id="boxtwo"></div>
</div>
Related
I have two navbars inside #mobile-header that I want to get the page content to scroll behind. I can't get it working.
Here is a JS Fiddle for the sample code
And here is the code
<div id="mobile-header">
<div class="top-header"></div>
<div class="navbar-inverse"></div>
</div>
<div id="page-wrap"></div>
and the css
.top-header {
width: 800px;
height: 50px;
background: blue;
}
.navbar-inverse {
width: 800px;
height: 100px;
background: green;
}
#mobile-header {
z-index: 10;
position: fixed;
left: 0;
right: 0;
top: 0;
border: 5px solid yellow;
}
#page-wrap {
z-index: 1;
position: relative;
height: 1500px;
width: 800px;
background: red;
}
can anyone help
Please check this. I have modified some part of CSS.
.top-header {
width: 800px;
height: 50px;
background: blue;
}
.navbar-inverse {
width: 800px;
height: 100px;
background: green;
}
#mobile-header {
z-index: 9999;
position: fixed;
left: 0 right:0 top:0;
border: 5px solid yellow;
top: 0px;
}
#page-wrap {
z-index: 9;
position: relative;
height: 1500px;
width: 800px;
background: red;
margin-top: 160px;
}
<div id="mobile-header">
<div class="top-header"></div>
<div class="navbar-inverse"></div>
</div>
<div id="page-wrap"></div>
Hope this is helpful for you.
Thanks.
Please see the code in jsbin
Screenshot:
All I need is just to have blue on top, then white, then greens. So ideally:
I tried z-index, create stacking context... nothing worked.
It might have something to do with negative margin in CSS
I'm happy to change the HTML code or change the current CSS, as long as I can get the desired effect.
.left,
.right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
margin-left: -10px;
margin-top: 10px;
}
<div class="out">
<div class="left"></div>
<div class="bar">
<div class="circle"></div>
</div>
<div class="right"></div>
</div>
Edit
I should have mentioned that my difficulty was mostly achieving the effect while keeping the current HTML setup (i.e. circle in bar). Turns out it doesn't seem possible, because
If no zindex on bar, can't make sure it's on top of circle
If set zindex on bar, then it creates new stacking context, then circle can't be on top of 2 greens. Because greens are on different stacking context
you can simplify this using just the div out with position + z-index
.out {
position: relative;
width: 400px;
height: 60px;
background-color: green;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
position: absolute;
top: 0;
left: 50%;
z-index: 10
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
margin-left: -10px;
margin-top: 10px;
position: absolute;
top: 0;
left: 50%;
z-index: 1
}
<div class="out">
<div class="circle"></div>
<div class="bar"></div>
</div>
EDITED : edited my answer after reading more carefully :) sorry about that
see here > jsFiddle
or snippet below :
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
position:relative;
z-index:1;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
z-index:6;
position:relative;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
top: 10px;
position:absolute;
left:0;
right:0;
margin:0 auto;
z-index:5;
}
.out {width:420px;position:relative;}
<div class="out">
<div class="left"></div><div class="bar"></div><div class="circle"></div><div class="right"></div>
</div>
OR if you don't want different bg color for .left and .right just use one big div .out and position the bar and circle on top of it :
.out {
position: relative;
width: 420px;
height: 60px;
background-color: green;
}
.bar {
width: 20px;
height: 100%;
background-color: blue;
position: absolute;
left: 0;
right:0;
margin:0 auto;
z-index: 2
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 10px;
left: 0;
right:0;
margin:0 auto;
z-index: 1
}
<div class="out">
<div class="bar"></div>
<div class="circle"></div>
</div>
What if we just interchange .bar as child element of .circle. And try as below,
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
margin:-10px 10px;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
display:inline-block;
position:absolute;
margin:10px -20px;
}
<div class="out">
<div class="left"></div>
<div class="circle"><div class="bar"></div></div>
<div class="right"></div>
</div>
You could even further simplify your markup and utilize a pseudo selector instead of wrestling with stacking order, and order elements naturally.
.out {
width: 400px;
padding: 10px 0;
background: green;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 100%;
display: block;
margin: 0 auto;
position: relative;
}
.circle:after {
content: '';
width: 20px;
height: 60px;
background-color: blue;
display: block;
margin: 0 auto;
position: absolute;
top: -10px;
left: 10px;
}
<div class="out">
<div class="left"></div>
<div class="circle"></div>
<div class="right"></div>
</div>
Use transform.
https://jsbin.com/geconefine/1/edit?html,css,output
.out{
position: relative;
z-index: 0;
}
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
position: relative;
z-index: -2;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
position: relative;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
transform: translateX(-10px);
margin-top: 10px;
position: relative;
z-index: -1;
}
You need a position before z-index will do anything. Since I don't see any applied in your current css that might be your issue.
.left, .right{
position: relative;
z-index: 1;
}
.circle{
position: relative;
z-index: 4;
}
.bar{
position: relative;
z-index: 5;
}
Here is my code:
.parent{
direction: rtl;
border: 2px solid;
background-color: #eee;
height: 50%;
}
.full_height{
height: 100%;
background-color: red;
}
.full_width1, .full_width2{
width: 100%;
background-color: green;
}
<div class="parent">
<div class="full_height"></div>
<div class="full_width1">something1</div>
<div class="full_width2">something2</div>
</div>
This is expected output:
How can I implement that?
A possible solution could look like this:
html, body{
height: 100%;
margin: 0;
padding: 0;
}
.parent{
direction: rtl;
border: 2px solid;
background-color: #eee;
height: 50%;
overflow: hidden;
}
.full_height{
float: right;
height: 100%;
width: 120px;
background-color: red;
}
.full_width1, .full_width2{
min-width: 120px;
height: 50%;
width: auto;
overflow: hidden;
background-color: green;
}
.full_width2{
background-color: blue;
}
You can find a fiddle preview right here: https://jsfiddle.net/7pb8pxnx/2/
I need to know how to cut that gray part from the blue box.
The red arrows on the image bellow show which part I would like to cut from the blue box. This is the code I have:
.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
}
.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #DDD;
}
<div class="father">
<div class="border"></div>
</div>
From what I understand you would like to cut off the grey part outside the blue area. If so, here's how you do it.
.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
background: lightblue;
overflow: hidden;
}
.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #DDD;
z-index: 1;
}
<div class="father">
<div class="border"></div>
</div>
Can you see this approach:
border-top-left-radius: 8px;
border-top-right-radius: 8px;
.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
background: lightblue;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 100%;
height: 30%;
background-color: #DDD;
}
<div class="father">
<div class="border"></div>
</div>
Are you looking for this?
.father {
height:400px;
width:400px;
margin:150px auto;
position:relative;
background:green;
}
.border {
position:relative;
bottom:50px;
margin:auto;
border-radius:50%;
width:96%;
height:30%;
background-color:#DDD;
z-index:-9;
}
<div class="father">
<div class="border"></div>
</div>
.father
{
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
background: #04aada;
border-radius: 50px 50px 0 0;
}
.border
{
position: relative;
bottom: 25px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #fff;
z-index: 1;
box-shadow: 0px -4px 0px #04aada;
}
<div class="father">
<div class="border"></div>
</div>
Is it possible without table tag or display: table?
https://monosnap.com/file/MoxMr7WehKJD4RyKWPTJ7Dyqg8dsez
<div class="wrapper">
<div class="title">Some title</div>
<div class="content">Content</div>
</div>
.wrapper {
border: 3px solid yellow;
width: 250px;
height: 350px;
position: fixed;
top: 10px;
left: 10px;
background: green;
}
.title {
min-height: 30px;
max-height: 80px;
background: blue;
}
.content {
background: red;
height: 100%;
}
http://jsfiddle.net/wqozs28y/
Ill try it with position absolute, but i donw know what will be the height on TITLE div :(
Yes, you can use flexbox depending on what level of browser support you want.
.wrapper {
border: 3px solid yellow;
width: 250px;
height: 350px;
position: fixed;
top: 10px;
left: 10px;
background: green;
display: flex;
flex-direction: column;
}
.title {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
min-height: 30px;
max-height: 80px;
background: blue;
}
.content {
background: red;
flex-grow: 1;
}
<div class="wrapper">
<div class="title">Some title</div>
<div class="content">Content</div>
</div>
JSFiddle Demo