Based on the MDN article "Stacking and float",
Stacking and float
For floating blocks the stacking order is a bit different. Floating
blocks are placed between non-positioned blocks and positioned blocks:
Background and borders of the root element
Descendant blocks in the normal flow, in order of appearance (in HTML)
Floating blocks
Descendant positioned elements, in order of appearance (in HTML)
However, when I try the sample code by myself, I find the DIV#1 is behind the DIV#3. Shouldn't the DIV#1 be in the front the DIV#3?
DIV#1 is positioned element, so it should be rendered after/in front of floating block.
Please check below code or jsfiddle.
<body>
<br /><br />
<div id="absdiv1">
<br /><span class="bold">DIV #1</span>
<br />position: absolute;
</div>
<div id="flodiv1">
<br /><span class="bold">DIV #2</span>
<br />float: left;
</div>
<div id="flodiv2">
<br /><span class="bold">DIV #3</span>
<br />float: right;
</div>
<br />
<div id="normdiv">
<br /><span class="bold">DIV #4</span>
<br />no positioning
</div>
<div id="absdiv2">
<br /><span class="bold">DIV #5</span>
<br />position: absolute;
</div>
</body>
div {
font: 12px Arial;
}
span.bold { font-weight: bold; }
#absdiv1 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 200px;
top: 10px;
right: 140px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#normdiv {
/* opacity: 0.7; */
height: 100px;
border: 1px dashed #999966;
background-color: #ffffcc;
margin: 0px 10px 0px 10px;
text-align: left;
}
#flodiv1 {
opacity: 0.7;
margin: 0px 10px 0px 20px;
float: left;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
text-align: center;
}
#flodiv2 {
opacity: 0.7;
margin: 0px 20px 0px 10px;
float: right;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
text-align: center;
}
#absdiv2 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 100px;
top: 130px;
left: 100px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
That's effect of opacity < 1.0. Just comment it:
#flodiv2 {
/*opacity: 0.7;*/
...
}
and you will see elements in normal order. Elements with opacity < 1.0 establish their own stacking context.
Concept seems to be working fine. You didn't mention browsers and their version. That might matter if nightly builds are involved. Anyway. Here's the code that works.
body{ background-color: rgba(0, 0, 0, .1); }
div { border: thin solid rgba(0, 0, 0, 1); width: 60%; }
#floating{ float: right; background-color: rgba(127, 0, 0, .5);}
#descendent-floating{ position: relative; background-color: rgba(0, 127, 0, .5);}
<body>
<div id="descendent">descendent</div>
<div id="floating">floating</div>
<div id="descendent-floating">descendent-floating</div>
</body>
Here's external link for jsfiddle.
Related
I have an element which displays process arrows. If I reduce the screen size, the edges from the outer process steps are being cut off.
It seems, that the borders of the Bootstrap column get over the arrows.
How can I protect the element from being cut off?
<div class="row">
<div class="col-md-4">
<h2>Headline</h2>
</div>
<div class="col-md-4">
<div align="center" class='steps-container'>
<div class='steps active'>
<span>Step 1</span>
</div>
<div class='steps' routerLink="/Step2">
<span>Step 2</span>
</div>
<div class='steps'>
<span>Step 3</span>
</div>
</div>
</div>
<div class="col-md-4"> </div>
</div>
*,
*:after,
*:before {
box-sizing: border-box;
}
.steps-container {
overflow: hidden;
margin: 0px;
padding: 0px;
white-space: nowrap;
border-left: 0px solid;
border-right: 0px solid;
width: 100%;
counter-reset: steps;
}
.steps {
position: relative;
display: inline-block;
left: -28px; /* -2px default + 26px offset to hide skewed area on the left side of first element*/
height: 50px;
line-height: 50px;
margin-left: 0px;
margin-right: 0px;
counter-increment: steps;
cursor: pointer;
transition: background 1s;
min-height: 50px;
min-width: 150px;
}
.steps:after,
.steps:before {
position: absolute;
left: 0px;
height: 50%;
width: 100%;
border-top: 2px solid;
border-bottom: 2px solid;
border-left: 3px solid; /* thicker border as skew makes them look thin */
border-right: 3px solid;
}
.steps:before {
transform: skew(45deg);
top: 0px;
border-bottom: none;
transform-origin: top left;
}
.steps span {
display: block;
padding-left: 40px;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
height: 75%;
}
...
I'm trying to center two input fields side by side together with horizontally centering. I have two problems, the first one is that the two input fields for whatever reason overlap each other a little.
The closest I have been to solving this problem is to use "box-sizing: border-box" but that, unfortunately, removes the padding and thus change the design. The second problem is that I need both of the input fields to be in the center.
.quote-page .contact .box {
width: 70%;
}
.quote-page .contact .box .left {
float: left;
width: 50%;
}
.quote-page .contact .box .right {
float: left;
width: 50%;
}
.quote-page .form-2 {
position: relative;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.8);
color: rgb(77, 77, 77);
border: none;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
line-height: 1.42857143;
height: 30px;
width: 100%;
margin: 10px 0 10px 0;
padding: 6px 12px;
}
<div class="box">
<div class="left">
<input name="email" type="email" class="form-2">
</div>
<div class="right">
<input name="email" type="email" class="form-2">
</div>
</div>
Here is the complete script so you can see the problem:
https://codepen.io/anon/pen/BdQqeN
You had the right idea but unfortunately you are going to have make additional adjustments to what you're creating whether you use the box-sizing: border-box; or not.
The reason it's acting funny is because without border-box you are going over the total of 100% width.
In order to create what you want, I've adjusted the following:
Changed the width of the .box
Added an overflow: hidden; to .box to prevent it from collapsing with the floated children
Added margin: 0 auto; to center the children to .box
Changed the width of .box .left to width: 49%; and a margin-right: 1%; (assuming you wanted space between the inputs)
Same as the above item but for .box .right
Added box-sizing: border-box to .form-2, and increased the height to 40px and padding to 12px
Here's an updated pen using border-box on just your middle inputs:
https://codepen.io/anon/pen/YxpRVK
CSS
.quote-page .contact .box {
width: 73.5%;
overflow: hidden;
margin: 0 auto;
}
.quote-page .contact .box .left {
float: left;
width: 49%;
margin-right: 1%;
}
.quote-page .contact .box .right {
float: left;
width: 49%;
margin-left: 1%;
}
.quote-page .form-2 {
box-sizing: border-box;
position: relative;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.8);
color: rgb(77, 77, 77);
/*border: 1px solid #ccc;*/
border: none;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
line-height: 1.42857143;
height: 40px;
width: 100%;
margin: 10px 0 10px 0;
padding: 12px;
}
HTML (No Changes)
<div class="box">
<div class="left">
<input name="email" type="email" class="form-2" placeholder="Enter your email" required="">
</div>
<div class="right">
<input name="email" type="email" class="form-2" placeholder="Enter your email" required="">
</div>
</div>
Hardly visible, but they're in the middle and next to each other.
I added the div with class .quote-page. You were referring to it in your CSS but in the HTML it was missing. Here it is the top element set to a width of 100%.
The div.box element is centered via margin: 0 auto.
.quote-page {
width: 100%;
}
.quote-page .box {
margin: 0 auto;
width: 70%;
display: flex;
}
.quote-page .contact .box .left {
width: 50%;
}
.quote-page .contact .box .right {
width: 50%;
}
.quote-page .form-2 {
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.8);
color: rgb(77, 77, 77);
border: none;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
line-height: 1.42857143;
height: 30px;
margin: 10px 0 10px 0;
padding: 6px 12px;
}
<div class="quote-page">
<div class="box">
<div class="left">
<input name="email" type="email" class="form-2">
</div>
<div class="right">
<input name="email" type="email" class="form-2">
</div>
</div>
</div>
Simplest way...
Add css
.box {text-align: center;}
.left, .right {display:inline-block;}
This MDN article explains the stacking context and floats. Here is the example they provide:
div {
font: 12px Arial;
}
span.bold {
font-weight: bold;
}
#absdiv1 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 200px;
top: 10px;
right: 140px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#normdiv {
/* opacity: 0.7; */
height: 100px;
border: 1px dashed #999966;
background-color: #ffffcc;
margin: 0px 10px 0px 10px;
text-align: left;
}
#flodiv1 {
opacity: 0.7;
margin: 0px 10px 0px 20px;
float: left;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
text-align: center;
}
#flodiv2 {
opacity: 0.7;
margin: 0px 20px 0px 10px;
float: right;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
text-align: center;
}
#absdiv2 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 100px;
top: 130px;
left: 100px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
<br />
<br />
<div id="absdiv1">
<br /><span class="bold">DIV #1</span>
<br />position: absolute;
</div>
<div id="flodiv1">
<br /><span class="bold">DIV #2</span>
<br />float: left;
</div>
<div id="flodiv2">
<br /><span class="bold">DIV #3</span>
<br />float: right;
</div>
<br />
<div id="normdiv">
<br /><span class="bold">DIV #4</span>
<br />no positioning
</div>
<div id="absdiv2">
<br /><span class="bold">DIV #5</span>
<br />position: absolute;
</div>
In the example, div#1 should belong to category 5 (Descendant positioned elements) and div#3 should belong to category 3 (Floating blocks). So div#1 should be over div#3. Why is it below in the example?
Stacking order and opacity
The stacking order is affected by the opacity property. This is noted in the article you linked to:
Note: In the example below, all the blocks except the non-positioned one, are translucent show the stacking order. If the opacity of the non-positioned block (DIV #4) is reduced, then something strange happens: the background and border of that block pops up above the floating blocks, but still under positioned blocks. I was not able to understand whether this is a bug or a peculiar interpretation of the specifications. (Applying opacity could implicitly create a stacking context.)
Testing this theory
Let's reduce the markup to include just the two divs in question. Here is the scenario we see; the absolutely positioned div1 is underneath div3:
div {
padding: 20px;
}
#div1 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 200px;
top: 100px;
left: 50px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#div3 {
opacity: 0.7;
margin: 0px 20px 0px 10px;
float: left;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
text-align: center;
}
<div id="div1">
DIV #1
<br>position: absolute;
</div>
<div id="div3">
DIV #3
<br>float: right;
</div>
Now, let's remove the opacity properties (specifically the one on div3). The stacking order is now as you expect it to be:
div {
padding: 20px;
}
#div1 {
/*opacity: 0.7;*/
position: absolute;
width: 150px;
height: 200px;
top: 100px;
left: 50px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#div3 {
/*opacity: 0.7;*/
margin: 0px 20px 0px 10px;
float: left;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
text-align: center;
}
<div id="div1">
DIV #1
<br>position: absolute;
</div>
<div id="div3">
DIV #3
<br>float: right;
</div>
Read more
Here is an in-depth write-up on how the opacity property affects the stacking order.
How can I display a div that is outside the <header> element in front of the header i.e. with a higher z-index. I've tried to use the z-index property but it doesn't seem to work. My particular example can be seen here: http://www.spabc.com/drupal/ I want to display the logo on the right side in front of the header bar.
Add position: relative; to #logo.
#logo {position: relative;}
Adding
position: relative;
to #logo will work. As for z-index, it does not work on default positioned elements. The standard position property is static.
z-index only works on positioned elements (position:absolute,
position:relative, or position:fixed).
Read more about z-index here.
Default element stacking
I read this on MDN, figured I'd go through it first before posting it here.
When no z-index is present in the element's properties, elements are stacked in the following order, 3 being the one the furthest in the back:
Background and borders of the root element
Descendant blocks in the normal flow, in order of appearance (in HTML)
Descendant positioned elements, in order of appearance (in HTML)
There are still rules that go with this order.
If the position value of multiple overlapping objects is the same, the order is given by their position in the HTML document.
If a position value is not set, it defaults to the static value. static elements will always fall behind elements that have a
position value.
div {
font: 12px Arial;
}
span.bold {
font-weight: bold;
}
#normdiv {
height: 70px;
border: 1px dashed #999966;
background-color: #ffffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv1 {
opacity: 0.7;
height: 100px;
position: relative;
top: 30px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv2 {
opacity: 0.7;
height: 100px;
position: relative;
top: 15px;
left: 20px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#absdiv1 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
left: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#absdiv2 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
right: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
<div id="absdiv1">
<br /><span class="bold">DIV #1</span>
<br />position: absolute;
</div>
<div id="reldiv1">
<br /><span class="bold">DIV #2</span>
<br />position: relative;
</div>
<div id="reldiv2">
<br /><span class="bold">DIV #3</span>
<br />position: relative;
</div>
<div id="absdiv2">
<br /><span class="bold">DIV #4</span>
<br />position: absolute;
</div>
<div id="normdiv">
<br /><span class="bold">DIV #5</span>
<br />no positioning
</div>
Stacking without z-index on floating objects
For floating blocks the stacking order is a bit different. Floating blocks are placed between non-positioned blocks and positioned blocks:
Background and borders of the root element
Descendant blocks in the normal flow, in order of appearance (in
HTML)
Floating blocks
Inline descendants in the normal flow
Descendant positioned elements, in order of appearance (in HTML)
div {
font: 12px Arial;
}
span.bold {
font-weight: bold;
}
#absdiv1 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 200px;
top: 10px;
right: 140px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#normdiv {
/* opacity: 0.7; */
height: 100px;
border: 1px dashed #999966;
background-color: #ffffcc;
margin: 0px 10px 0px 10px;
text-align: left;
}
#flodiv1 {
opacity: 0.7;
margin: 0px 10px 0px 20px;
float: left;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
text-align: center;
}
#flodiv2 {
opacity: 0.7;
margin: 0px 20px 0px 10px;
float: right;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
text-align: center;
}
#absdiv2 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 100px;
top: 130px;
left: 100px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
<div id="absdiv1">
<br /><span class="bold">DIV #1</span>
<br />position: absolute;
</div>
<div id="flodiv1">
<br /><span class="bold">DIV #2</span>
<br />float: left;
</div>
<div id="flodiv2">
<br /><span class="bold">DIV #3</span>
<br />float: right;
</div>
<br />
<div id="normdiv">
<br /><span class="bold">DIV #4</span>
<br />no positioning
</div>
<div id="absdiv2">
<br /><span class="bold">DIV #5</span>
<br />position: absolute;
</div>
I have some problems with <div>s. The inner <div> (content div) won't push the outer <div> (wrap_content).
Let me post the code so that you have a chance to see what could be wrong.
style.css
* {
padding: 0px;
margin: 0px;
}
body {
background: #e2e2e2;
color: #f2f2f2;
font-family: Arial;
}
#wrap_design {
width: 1139px;
}
#wrap_content {
float: right;
max-width: 963px;
height: 100%;
border-right: 8px solid #2d2828;
border-left: 8px solid #2d2828;
border-bottom: 8px solid #2d2828;
padding-bottom: 10px;
}
#header {
height: 236px;
width: 963px;
background-color: #2d2828;
}
#headerimg{
z-index: 1;
margin-left: -26px;
}
#loggedin_box {
min-height: 230px;
width: 160px;
background: #2d2828;
float: left;
margin-top: 236px;
position: static;
padding-bottom: 5px;
}
#loggedin_box_green {
height: 30px:
width: 150px;
background: #73aa09;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
letter-spacing: 2px;
}
#loggedin_box ul {
border: none;
}
#loggedin_box ul li {
list-style: none;
text-align: left;
}
#loggedin_box ul li a {
font-family: Arial;
font-size: 14px;
color: #b1b2b2;
text-decoration: none;
padding-left: 5px;
}
#menu_container {
margin: 0px 0px 0px 0px;
background: #2d2828;
font-family: Arial;
width: 100%;
margin: 0px auto;
height: 65px;
}
#content {
color: black;
vertical-align: top;
height: 100%;
margin-bottom: 10px;
clear: both;
}
#content-sidebar {
border-left: 2px solid #2d2828;
float: right;
width: 285px;
max-width: 285px;
height: 100%;
}
index.php
<html>
<head>
<link rel="shortcut icon" href="images/nfgico.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/style/style.css" type="text/css" />
</head>
<body>
<CENTER>
<div id="wrap_design">
<div id="loggedin_box">
<?php
if($_SESSION['username'] == "") {
?>
<div id="loggedin_box_green">Log ind</div>
<div style="text-align: left; padding-left: 10px;">
<form action="login_check.php" method="post">
<input type="text" value="Brugernavn" name="username" style="width: 140px;" onclick="this.value=''"><br /><br />
<input type="password" value="password" name="password" style="width: 140px;" onclick="this.value=''"><br /><br />
<font style="font-family: Arial; font-size: 12px;">Husk mig:</font><input style="margin-left:15px;" type="checkbox" name="rememberme" class="checkbox" value="1" /><br /><br />
<input type="submit" value="Log ind"><br /><br />
</form>
<ul>
<li>Glemt kodeord</li>
<li>Opret bruger</li>
</ul>
</div>
<?php
} else {
?>
<div id="loggedin_box_green">Network</div>
<ul>
<li>Wall</li>
<li>Profil</li>
<li>Chat</li>
<li>Achievements</li>
<li>Clanside</li>
<li>Søg modstander</li>
<li>Søg spil</li>
<li>Log ud</li>
</ul>
<?php
}
?>
</div>
<div id="wrap_content"> <!-- This is the one that needs to be pushed -->
<div id="header">
<img src="/images/banner.png" id="headerimg">
</div>
<div id="menu_container">
<div id="droplinetabs1" class="droplinetabs">
<ul>
<li><span>Forside</span></li>
<li><span>Nyheder</span>
<ul>
<li>Seneste</li>
<li>lol</li>
<li>loool</li>
<li>loool</li>
</ul>
</li>
<li><span>Artikler</span></li>
<li><span>Spil</span></li>
<li><span>Turneringer</span></li>
<li><span>Clan</span></li>
<li><span>Streams</span></li>
<li><span>Webshop</span></li>
</ul>
</div>
</div>
<!-- Content/brødtekst -->
<div id="content">
CONTENT GOES HERE THIS IS WHAT NEED TO PUSH
</div>
</div>
</CENTER>
</body>
</html>
There is some part of the code from index.php that I didn't post because I hope you don't need it :)
I really hope someone can help me!
ps. I have done some research on the internet, and learned that I should use clear: both; but I really can't get it to work.
Remove the height: 100% from your #wrap_content style (it's causing problems), and then to ensure it wraps around any float elements, add width and overflow as folows:
#wrap_content {
float: right;
max-width: 963px;
border-right: 8px solid #2d2828;
border-left: 8px solid #2d2828;
border-bottom: 8px solid #2d2828;
padding-bottom: 10px;
width: auto; /* Must use this for overflow to do what you want */
overflow: hidden; /* This, plus width, causes box to stretch around floated elements inside of it */
}
Just as a little note, there's a fair amount of unnecessary css going on in there. I'd encourage you to go through it carefully and modify/remove it. You could do what you are after with half of the amount of css.
REMOVE all of the "height:100%;" everywhere - if does not do what you think it does.
I would suggest removing your CENTER and making your #wrap_design be like this:
#wrap_design
{
margin: 0 auto;
width: 1139px;
}
This will center your wrapper - I'd strongly advise against CENTER. If you want to change the margin top of this wrapper (ie 20px from top and bottom) do this margin: 20px auto;.
You don't need to use clear: both; necessarily. In a wrapper of a float (or multiple floats) you can just put overflow: hidden (same effect) and no additional markup is needed:
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
overflow: hidden;
width: 400px;
}
.left
{
float: left;
}
.right
{
float: right;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
</div>
If you didn't have the "overflow: hidden" in this example you wouldn't see the "#CCC" background color in the .container.
This is the same as doing clear way (but again above is better because less markup):
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
width: 400px;
}
.left
{
float: left;
}
.right
{
float: right;
}
.clear
{
clear: both;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
<div class="clear"></div>
</div>
Clear method is good in a case like this (when you want a child "outside of the parent"):
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
margin: 50px auto;
width: 400px;
}
.left
{
float: left;
}
.right
{
background-color: #333;
color: #FFF;
float: right;
margin: -10px -40px 0 0;
}
.clear
{
clear: both;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
<div class="clear"></div>
</div>
But again, I wouldn't recommend that markup, if your design could be different you can use clear like this too:
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
margin: 50px auto;
width: 400px;
}
.left
{
float: left;
width: 200px;
}
.right
{
background-color: #333;
color: #FFF;
float: right;
margin: -10px -40px 0 0;
width: 240px;
}
.full
{
background: #f5f5f5;
clear: both;
margin: 20px auto;
text-align: center;
width: 90%;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
<div class="full">
this is full sized
</div>
</div>
If you follow these example, you should solve your problem :)