HTML/CSS/Layout/Container Layout
Содержание
- 1 Absolute container and absolute children
- 2 Absolute container and absolute child with offset to left and right
- 3 By default, the first absolutely positioned element has a z-index value of one, and with each subsequent element, the z-index is increased.
- 4 Descendant elements must always have a z-index higher than that of their parent.
- 5 everything floated
- 6 Float left in a relative positioned container
- 7 float: right in a container
- 8 Float right in a relative positioned container
- 9 Nested floating container
- 10 relative position and absolute descendant
- 11 Smaller container but larger children
- 12 Stretched Absolute Top Aligned
Absolute container and absolute children
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Positioning Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style rel="stylesheet" type="text/css">
div,h1,p {
border: 1px solid #000000;
margin: 5px;
background-color: #ffffff;
}
div {
width: 300px;
height: 120px;
}
div#page1 {
position: absolute;
top: 20px;
left: 20px;
}
p.para1 {
position: absolute;
top: 50px;
left: 20px;
width: 250px;
}
p.para2 {
position: absolute;
top: 80px;
left: 20px;
width: 250px;
}
</style>
</head>
<body>
<div id="page1">
<h1>Heading One</h1>
<p class="para1">This is paragraph one.</p>
<p class="para2">This is paragraph two.</p>
</div>
</body>
</html>
Absolute container and absolute child with offset to left and right
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Opposing Offset Properties</title>
<style rel="stylesheet" type="text/css">
div {
background: yellow;
border: 1px solid rgb(128, 128, 128);
position: absolute;
width: 600px;
height: 600px;
}
p#offset-x {
margin: 0;
padding: 5px;
border: 1px solid black;
position: absolute;
bottom: 5px;
left: 5px;
right: 123px;
background: gold;
}
</style>
</head>
<body>
<div>
<p id="offset-x">
When the left and right offset properties are applied to the same
element, width is implied.
</p>
</div>
</body>
</html>
By default, the first absolutely positioned element has a z-index value of one, and with each subsequent element, the z-index is increased.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>The z-index</title>
<style rel="stylesheet" type="text/css">
div.container {
height: 132px;
position: relative;
}
div.zauto {
position: absolute;
border: 1px solid black;
width: 100px;
height: 100px;
}
div.zone {
background: purple;
top: 0;
left: 0;
}
div.ztwo {
background: orange;
top: 10px;
left: 10px;
}
div.zthree {
background: magenta;
top: 20px;
left: 20px;
}
div.zfour {
background: yellow;
top: 30px;
left: 30px;
}
div.slide {
float: left;
padding: 5px;
width: 200px;
border: 1px solid rgb(200, 200, 200);
background: white;
margin: 5px;
height: 400px;
}
</style>
</head>
<body>
<div class="slide">
<div class="container">
<div class="zauto zone"></div>
<div class="zauto ztwo"></div>
<div class="zauto zthree"></div>
<div class="zauto zfour"></div>
</div>
</div>
</body>
</html>
Descendant elements must always have a z-index higher than that of their parent.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>The z-index</title>
<style rel="stylesheet" type="text/css">
body {
background: lightyellow;
}
div.container {
height: 132px;
position: relative;
}
div.zauto {
position: absolute;
border: 1px solid black;
width: 100px;
height: 100px;
}
div.zone {
background: purple;
top: 0;
left: 0;
}
div.ztwo {
background: orange;
top: 10px;
left: 10px;
}
div.zthree {
background: magenta;
top: 20px;
left: 20px;
}
div.zfour {
background: yellow;
top: 30px;
left: 30px;
}
div#nine {
z-index: 4;
}
div#ten {
z-index: 3;
}
div#eleven {
z-index: 2;
}
div#twelve {
z-index: 1;
}
div#nested div {
top: 10px;
left: 10px;
}
div.slide {
float: left;
padding: 5px;
width: 200px;
border: 1px solid rgb(200, 200, 200);
background: white;
margin: 5px;
height: 400px;
}
</style>
</head>
<body>
<div class="slide">
<div class="container" id="nested">
<div class="zauto zone" id="nine">
<div class="zauto ztwo" id="ten">
<div class="zauto zthree" id="eleven">
<div class="zauto zfour" id="twelve"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
everything floated
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#parent1 {
border: 5px solid purple;
float: left;
}
#parent2 {
border: 5px solid silver;
float: left;
}
#parent3 {
border: 5px solid yellow;
float: left;
}
#parent4 {
border: 5px solid blue;
padding: 10px;
float: left;
}
.floatleft {
border: 5px solid red;
float: left;
width: 200px;
background: white;
}
.floatright {
border: 5px solid green;
float: right;
width: 200px;
background: white;
}
</style>
</head>
<body>
<div id="parent1">
<p>This is the first parent container</p>
<div id="parent2">
<p>This is the second parent container</p>
<div id="parent3">
<p>This is the third parent container</p>
<div id="parent4">
<p>This is the fourth parent container</p>
<p class="floatleft">This is floated content.</p>
<p class="floatright">This is floated content.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Float left in a relative positioned container
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
border: 1px dotted #BAB9B8;
width: 800px;
overflow: hidden;
margin-bottom: 20px;
}
.box {
background: #FFFCC4;
border: 1px dotted #BAB9B8;
width: 200px;
height: 100px;
margin: 20px;
position: relative;
}
.floatLeft {
float: left;
}
.text {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="floatLeft box"><em class="text">Box 1</em></div>
<div class="box"><em class="text">Box 2</em></div>
<div class="box"><em class="text">Box 3</em></div>
</div>
</body>
</html>
float: right in a container
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Float problem explained</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#parent {
border: 5px solid blue;
padding: 10px;
height: 1%;
}
.floatleft {
border: 5px solid red;
float: left;
width: 200px;
background: white;
}
.floatright {
border: 5px solid green;
float: right;
width: 200px;
background: white;
}
</style>
</head>
<body>
<div id="parent">
<p>This is the parent container</p>
<p class="floatleft">This is floated content.</p>
<p class="floatright">This is floated content.</p>
</div>
</body>
</html>
Float right in a relative positioned container
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
border: 1px dotted #BAB9B8;
width: 800px;
overflow: hidden;
margin-bottom: 20px;
}
.box {
background: #FFFCC4;
border: 1px dotted #BAB9B8;
width: 200px;
height: 100px;
margin: 20px;
position: relative;
}
.floatRight {
float: right;
}
.text {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="floatRight box"><em class="text">Box 1</em></div>
<div class="box"><em class="text">Box 2</em></div>
<div class="box"><em class="text">Box 3</em></div>
</div>
</body>
</html>
Nested floating container
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>immediate parent container only floated</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#parent1 {
border: 5px solid purple;
}
#parent2 {
border: 5px solid blue;
padding: 10px;
float: left;
}
.floatleft {
border: 5px solid red;
float: left;
width: 200px;
background: white;
}
.floatright {
border: 5px solid green;
float: right;
width: 200px;
background: white;
}
</style>
</head>
<body>
<div id="parent1">
<p>This is the first parent container</p>
<div id="parent2">
<p>This is the second parent container</p>
<p class="floatleft">This is floated content.</p>
<p class="floatright">This is floated content.</p>
</div>
</div>
</body>
</html>
relative position and absolute descendant
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div {
padding: 10px;
border: 1px solid black;
background: red;
}
div#div1 {
position: relative;
margin: 30px;
}
div#div2 {
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="div1">
This is the text of the first div.
This is the text of the first div.
<div id="div2">
This is the text of the second div.
This is the text of the second div.
</div>
</div>
</body>
</html>
Smaller container but larger children
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>guillotine</title>
<style rel="stylesheet" type="text/css">
div#container {
border: 1px solid black;
margin: 0 20px;
background: yellow;
}
div#float {
background: gold;
float: left;
border: 1px solid black;
width: 150px;
height: 150px;
margin: 5px;
}
</style>
</head>
<body>
<div id="container">
<div id="float">
<p>
Float text.
<p>
This text is chopped off! This text is chopped off!
</p>
</div>
<ul>
<li><a href="#">Content on.</a></li>
</ul>
</div>
</body>
</html>
Stretched Absolute Top Aligned
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" title="text/css">
* .grandContainer {
position: relative;
height: 300px;
width: 700px;
border: 2px solid black;
background: red;
}
* .parent {
margin: 10px;
padding: 10px;
padding-top: 0;
border: 1px solid black;
background: purple;
}
* .extraStyle {
padding: 5px;
border: 5px solid black;
width: 120px;
text-align: center;
position: relative;
}
* .extraStyle span {
left: 0;
width: 130px;
height: auto;
}
#myStyle {
height: auto;
top: 0;
margin-top: 0;
bottom: 0;
margin-bottom: 0;
position: absolute;
margin-left: 510px;
background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<span id="myStyle" class="extraStyle"><span>Stretched Absolute</span></span>
</div>
</div>
</body>
</html>