I'm trying to get the yellow circle on top of all elements, all my elements are positioned so my z-index of 999999999 should have put it upfront but it's not working for some reason, any help?
.menu_maincontainer{width:100%; height:auto; display:flex; flex-direction:column; overflow:hidden; outline:1px solid red; position:relative; }
.menu_contents_container{width:100%; height:auto; background-color:red; position:relative; margin-top:300px; padding:25px;}
.menu_background_oval{width:105%; height:500px; border-radius:50%; position:absolute; left:50%; z-index:1; transform:translateX(-50%); top:-180px; background-color:red;}
.menu_contants_decorative_circle{width:200px; height:200px; border-radius:50%; border:1px solid blue; background-color:yellow; position:absolute; z-index:9999999999; left:50%; top:50px; transform:translateX(-50%); }
.menu_contents_texts_container{width:100%; min-height:500px; background-color:red; z-index:2; outline:1px solid blue; display:flex; flex-direction:column; position:relative; }
<div class="menu_maincontainer" style="">
<div class="menu_contents_container" style="">
<div class="menu_background_oval" style="">
<div class="menu_contants_decorative_circle" style=""></div>
</div>
<div class="menu_contents_texts_container" style="">
</div>
</div>
</div>
Because menu_contants_decorative_circle is a child of menu_background_oval, which has a z-index of 1, the circle will inherit the same z-index. You can think of it as having a z-index of 9999999999 on a certain layer (z-index: 1), but that is practically the same as z-index: 1;
Changing the z-index of the circle's parent will solve this:
.menu_maincontainer {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
overflow: hidden;
outline: 1px solid red;
position: relative;
}
.menu_contents_container {
width: 100%;
height: auto;
background-color: red;
position: relative;
margin-top: 300px;
padding: 25px;
}
.menu_background_oval {
width: 105%;
height: 500px;
border-radius: 50%;
position: absolute;
left: 50%;
z-index: 5; /* changed */
transform: translateX(-50%);
top: -180px;
background-color: red;
}
.menu_contants_decorative_circle {
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid blue;
background-color: yellow;
position: absolute;
z-index: 1;
left: 50%;
top: 50px;
transform: translateX(-50%);
}
.menu_contents_texts_container {
width: 100%;
min-height: 500px;
background-color: red;
z-index: 2;
outline: 1px solid blue;
display: flex;
flex-direction: column;
position: relative;
}
<div class="menu_maincontainer">
<div class="menu_contents_container">
<div class="menu_background_oval">
<div class="menu_contants_decorative_circle"></div>
</div>
<div class="menu_contents_texts_container">
</div>
</div>
</div>
Related
i want to ask you. I'm trying to create a border using pseudo element (after). I want to place a border in the middle of the div box that I have created, without setting (top, bottom) and (left, right). Can it be automated in the middle?
My Codepen
<div class="box">
</div>
.box{
height:500px;
width:300px;
background-color:red;
position:relative;
&::after{
content:'';
position:absolute;
border:2px solid #fff;
height:90%;
width:90%;
}
}
I've used percentages for the top and left and than correect the positioning with transform: translate(-50%, -50%); so its in the middle
.box{
height:500px;
width:300px;
background-color:red;
position:relative;
}
.box::after{
content:'';
position:absolute;
border:2px solid #fff;
height:90%;
width:90%;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
}
<div class="box"></div>
.box{
height:500px;
width:300px;
background-color:red;
position:relative;
}
.box:after {
content: '';
position: absolute;
border: 2px solid #fff;
top: 3%;
left: 4%;
height: 93%;
width: 90%;
}
<div class="box">
</div>
Yes it can:
.box {
width: 500px;
height: 500px;
position: relative;
background-color: blue;
padding: 10px;
}
.box:after {
content: '';
position: absolute;
display: block;
width: 95%;
height: 95%;
border: 1px solid #FFF;
}
<div class="box">
</div>
Allthough I don't completely understand why you wouldn't want to use top, right, bottom, left values. With transform, you can't automate it ALWAYS. You'll have to set it to half the height of the box. With a top value, you could just set it to 50%.
There are couple of ways....!!
.box{
height:500px;
width:300px;
background-color:red;
position:relative;
&::after{
content:'';
position:absolute;
border:2px solid blue;
height:90%;
width:90%;
right: 50%;
bottom: 50%;
transform: translate(50%,50%);
}
}
Another way...without using positions.
.box{
height:500px;
width:300px;
background-color:red;
display: flex;
&::after{
content:'';
border:2px solid blue;
height:90%;
width:90%;
margin: auto;
}
}
You can use flexbox on the .box element to center its contents. Just make sure no other position property is set on the ::after pseudo-element:
.box {
height: 500px;
width: 300px;
background-color: red;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.box::after {
content: '';
position: absolute;
border: 2px solid #fff;
height: 90%;
width: 90%;
}
I'm trying to make such a stuff
But somehow I got something like the one below(Please ignore the color, font family for now)
My code is here.
HTML:
<div class="box">
<p>Instagram Photo</p>
</div>
<hr>
CSS:
.box{
background-color:red;
width:60%;
margin-left:20%;
height:30px;
z-index:3;
position:static;
}
.box p{
text-align:center;
color:white;
line-height:30px;
}
hr {
border-top: 1px solid red;
border-bottom: 1px solid blue;
z-index:-1;
margin-top:-15px;
position:static;
}
Change position: static to position: relative for the box.
CSS-Tricks reference
z-index only effects elements that have a position value other than
static (the default).
.box {
background-color: red;
width: 60%;
margin-left: 20%;
height: 30px;
z-index: 3;
position: relative;
}
.box p {
text-align: center;
color: white;
line-height: 30px;
}
hr {
border-top: 1px solid red;
border-bottom: 1px solid blue;
z-index: -1;
margin-top: -15px;
position: static;
}
<div class="box">
<p>Instagram Photo</p>
</div>
<hr>
I tried to make it exactly like the image you put.
Whenever you want to put an HTML element above or beneath another element, use the z-index property. The more the value of the z-index, it will be more on the above, and vice versa
.box{
background-color: #F8931F;
position: absolute;
width: 200px;
text-align: center;
color: #fff;
padding: 5px;
text-transform: uppercase;
left: 50%;
top: 40px;
transform: translate(-50%,0);
}
.seperator{
width: 100%;
height: 2px;
position: absolute;
background-color: #F8931F;
top: 52px;
z-index: -1;
}
<div class="box">instagram photos</div>
<div class="seperator"></div>
One suggestion is to use :after for the border.
.box{
height:30px;
z-index:3;
position:static;
}
.box p{
background-color:red;
text-align:center;
color:white;
line-height:30px;
margin: 0;
margin-left:20%;
width:60%;
}
.box:after{
border-top: 1px solid red;
border-bottom: 1px solid blue;
content: '';
display: block;
z-index:-1;
top:-15px;
position: relative;
width: 100%;
height: 0px;
}
<div class="box">
<p>Instagram Photo</p>
</div>
http://jsfiddle.net/afelixj/nrEfm/50/
I want to align 3 different child div horizontally.
these 3 div contain 1 image (with height et width px). There is a link hover each div (but i want my onmouseover to be only over the image and not over the space left in the div).
So i don't want that my div take each 33% of the screen.
But i want my left image totally on the left side on the screen, my central image on center, and my third image totally on the right side of the screen
My parent div is absolute, and child div are relative with float (i don't know if is the good thing or not).
My example is here:
https://jsfiddle.net/mytom/eabgewnf/
My HTML:
<div class="controls">
<div class="controls_prev"></div>
<div class="controls_toggle"></div>
<div class="controls_next"></div>
</div>`
My CSS:
.controls {
position:absolute;
width:100%;
height:100px;
top:50%;
margin-top:-37px;
display:block;
}
.controls_prev {
opacity: 0.6;
position:relative;
width:78px;
height:100px;
float:left;
border: solid 1px #40b2d6;
}
.controls_toggle {
opacity: 0.6;
position:relative;
width:78px;
height:100px;
margin:0px auto !important;
border: solid 1px #40b2d6;
}
.controls_next {
opacity: 0.6;
position:relative;
width:78px;
height:100px;
float:right;
border: solid 1px #40b2d6;
}
-> My right div is not placed correctly.
how to do that?
I would do the following.
Use absolute positioning to place .controls_prev to the left and .controls_next to the right.
Keep .controls_toggle in regular flow and use margin: 0 auto to center it. This works well because both .controls_prev and .controls_next have the same width.
.controls {
position: absolute;
width: 100%;
height: 100px;
top: 50%;
margin-top: -37px;
display: block;
border: 1px dotted blue;
}
.controls_prev {
opacity: 0.6;
position: absolute;
width: 78px;
height: 100px;
top: 0px;
left: 0px;
border: solid 1px #40b2d6;
}
.controls_toggle {
opacity: 0.6;
width: 78px;
height: 100px;
margin: 0 auto;
border: solid 1px #40b2d6;
}
.controls_next {
opacity: 0.6;
position: absolute;
width: 78px;
height: 100px;
top: 0px;
right: 0px;
border: solid 1px #40b2d6;
}
<div class="controls">
<div class="controls_prev"></div>
<div class="controls_toggle"></div>
<div class="controls_next"></div>
</div>
Too many changes to list, but this should work. Note the reordering of the markup.
.controls {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 0;
margin-top: -37px;
background: #ddd;
}
.controls_prev {
opacity: 0.6;
position: relative;
width: 78px;
height: 100px;
float: left;
border: solid 1px #40b2d6;
}
.controls_toggle {
opacity: 0.6;
position: relative;
width: 78px;
height: 100px;
margin: 0 auto;
border: solid 1px #40b2d6;
}
.controls_next {
opacity: 0.6;
position: relative;
width: 78px;
height: 100px;
float: right;
border: solid 1px #40b2d6;
}
<div class="controls">
<div class="controls_prev"></div>
<div class="controls_next"></div>
<div class="controls_toggle"></div>
</div>
Try this.
.controls {
position: absolute;
width: 100%;
height: 100px;
top: 50%;
margin-top: -37px;
display: table;
table-layout: fixed;
}
.align {
display: table-cell;
vertical-align: top;
width: 100%;
padding:3px; /* just for show */
}
.inner {
border: solid 1px #40b2d6;
opacity: 0.6;
height: 100px;
}
<div class="controls">
<div class="controls_prev align">
<div class="inner"></div>
</div>
<div class="controls_toggle align">
<div class="inner"></div>
</div>
<div class="controls_next align">
<div class="inner"></div>
</div>
</div>
I've updated your fiddle to set each div's display to table-cell and added display: table to the container. Is this what you're after?
https://jsfiddle.net/eabgewnf/17/
CSS:
.controls{
position:absolute;
width:100%;
height:100px;
top:50%;
margin-top:-37px;
display:table;
}
.controls_prev{
display:table-cell;
opacity: 0.6;
height:100px;
border: solid 1px #40b2d6;
}
.controls_toggle{
display:table-cell;
opacity: 0.6;
height:100px;
top:0px;
left:0px;
border: solid 1px #40b2d6;
}
.controls_next{
display:table-cell;
opacity: 0.6;
height:100px;
border: solid 1px #40b2d6;
}
HTML:
<div class="controls">
<div class="controls_prev">left</div>
<div class="controls_toggle">this is the center</div>
<div class="controls_next">right</div>
</div>
To achieve that, I would use a table since is very useful. If you set the table width to 100vw (100% of the screen) and play with the percentages as you want.
.controls{
position:absolute;
width:100vw;
height:100px;
top:50%;
margin-top:-37px;
display:block;
table-layout: fixed;
}
.controls_prev{
opacity: 0.6;
width:20vw;
height:100px;
top:0px;
left:0px;
border: solid 1px #40b2d6;
}
.controls_toggle{
opacity: 0.6;
width:20vw;
height:100px;
top:0px;
left:0px;
border: solid 1px #40b2d6;
}
.controls_next{
opacity: 0.6;
width:20vw;
height:100px;
top:0px;
right:0px;
border: solid 1px #40b2d6;
}
.controls_separation{
width:20vw;
}
<table>
<tr class="controls">
<td class="controls_prev"></td>
<td class="controls_separation"></td>
<td class="controls_toggle"></td>
<td class="controls_separation"></td>
<td class="controls_next"></td>
</tr>
</table>
I have three div boxes
box1 - menu, box3 - info, and box2 - slide box which I want to be back of box1 and box3, (As the photo shows http://s16.postimg.org/u9mwuhmcl/111.png)
My attempt:
.box1 {
width:980px;
height:100px;
background-color:#CCCCCC;
}
.box2 {
width:980px;
height:100px;
background-color:#000;
position:relative;
z-index:1 ;
}
.box3 {
width:980px;
height:100px;
background-color:#CCCCCC;
}
<div class="box1">Menu</div>
<div class="box2">Slider</div>
<div class="box3">Info text</div>
Here is one options using position relative on the top and bottom boxes.
JSfiddle Demo
* {
color: white;
}
.box1,
.box3 {
margin: auto;
}
.box2 {
height: 100px;
background-color: #000;
position: relative;
z-index: -1;
}
.box1 {
width: 980px;
height: 100px;
background-color: #CCCCCC;
position: relative;
top: 1em;
}
.box3 {
width: 980px;
height: 100px;
background-color: #CCCCCC;
position: relative;
top: -1em;
}
<div class="box1">Menu</div>
<div class="box2">Slider</div>
<div class="box3">Info text</div>
2nd option with position relative on the second box.
JSfiddle Demo 2
* {
color: white;
}
.box1,
.box3 {
margin: auto;
}
.box2 {
height: 100px;
background-color: #000;
position: relative;
top: -1em;
z-index: -1;
}
.box1 {
width: 980px;
height: 100px;
background-color: #CCCCCC;
position: relative;
}
.box3 {
width: 980px;
height: 100px;
background-color: #CCCCCC;
position: relative;
margin-top: -2em;
}
<div class="box1">Menu</div>
<div class="box2">Slider</div>
<div class="box3">Info text</div>
Try
.box1, .box3 {
position: relative;
z-index: 0;
}
.box2 {
z-index: 1;
}
for box 1 and box 3.
Note: please set top,width,height according to your need.
.box1 {
width:500px;
height:50px;
background-color:#CCCCCC;
position:absolute;
left:0px;
right:0px;
top:0px;
}
.box3 {
width:500px;
height:50px;
background-color:#CCCCCC;
position:absolute;
left:0px;
right:0px;
top:100px;
}
For box 3
.box3 {
width:980px;
height:100px;
background-color:#CCCCCC;
margin-top:40px;
}
You better need a wrapper to simply the code.
No need to play with z-index in your case because position: relative; will give your block priority to the default position: static;
.wrapper{
width: 980px;
}
.box1, .box3 {
height:100px;
margin: 0 20px;
background-color:#CCCCCC;
box-sizing: padding-box;
position: relative;
}
.box2 {
height:100px;
margin: -20px 0;
background-color:#000;
}
<div class="wrapper">
<div class="box1">Menu</div>
<div class="box2">Slider</div>
<div class="box3">Info text</div>
</div>
use this-
.box1 {
width:90%;
height:100px;
background-color:#CCCCCC;
margin:0 auto;
position: relative;
z-index: 2;
bottom: -10px;
}
.box2 {
width:100%;
height:100px;
background-color:red;
position:relative;
z-index:1 ;
margin:0 auto;
padding:10px;
}
.box3 {
background-color: #cccccc;
height: 100px;
margin: 0 auto;
position: relative;
top: -10px;
width:90%;
z-index: 4;
<div class="box1">Menu</div>
<div class="box2">Slider</div>
<div class="box3">Info text</div>
I hope it will helps you.
Demo jsFiddle
I have div color azure I want to fill the width area in the middle column no meter what size will be.
is there any solution with css3/css no jQuery ?
i need it like this picture:
the ststus current like this:
many Thx.
Demo jsFiddle
the code html:
<div id="frame">
<div id="inside_window">
<div id="Yellow"></div>
<div id="Green"></div>
<div id="Blue"></div>
<div id="Red"></div>
<div id="ver"></div>
<div id="hor"></div>
<div id="ver2"></div>
</div>
</div>
the code css:
html, body{
height:100%;
background-color: azure;
}
#frame
{
position: relative;
background-color: black;
height: 100%;
width: 100%;
margin: auto;
padding:0;
border: 1px solid black;
}
#Yellow
{
position: absolute;
height: 100%;
width: 150px;
-webkit-border-radius: 0px;
margin: 0 ;
background-color: Yellow;
z-index:10;
display:table;
left:0px;
top:0;
}
#Green
{
position: absolute;
height: 100%;
width: 150px;
-webkit-border-radius: 0px;
margin: 0 ;
background-color: green;
z-index:10;
right:0px;
top:0;
}
#Blue
{
position: relative;
height:100%;
min-width:65.8%;
-webkit-border-radius: 0px;
margin: 0 auto;
background-color: #62A9FF;
z-index:10;
display:table;
font-size:220%;
left:0px;
top:0px;
}
#Red
{
position: absolute;
height: 150px;
width: 100%;
-webkit-border-radius: 0px;
margin: 0 ;
background-color: red;
z-index:10;
border: 1px solid black;
left:0px;
bottom:0px;
}
#inside_window
{
width:100%;
height:100%;
margin:0 auto;
position: relative;
border: 1px solid black;
background-color: brown;
-webkit-transform: rotate(0deg);
-webkit-transform-origin:50% 50%;
}
#ver
{
position: absolute;
height: 100%;
width: 5px;
margin: 0;
background-color: white;
left:150px;
top:0px;
z-index:1;
}
#hor
{
position: absolute;
height: 5px;
width: 100%;
margin: 0;
background-color: white;
left:0px;
bottom:150px;
z-index:20;
}
#ver2
{
position: absolute;
height: 100%;
width: 5px;
margin: 0;
background-color: white;
right:150px;
top:0px;
z-index:1;
}
Try removing the following CSS from your blue code:
position: relative;
display:table;
There are many ways to acheive a layout like this. Supposing that you could alter the order of your content, you could always try the "Holy Grail" layout method.