HTML/CSS/Box Model/left
Содержание
- 1 Absolute Outside its parent on the Bottom Right with 100% left
- 2 Fixed block with width and height to left and bottom
- 3 left aligns the left side of an absolute element
- 4 Positive values offset to the right and negative to the left.
- 5 Relative offset float
- 6 Relative sized offset
- 7 Stacking order of three classes used in div elements in the body
- 8 Top-left Absolute positioned element
- 9 use "left" to offset the left side of an element from the left side of its reference position.
- 10 When all four offset properties are specified on the same element both width and height are implied.
- 11 width is auto, both left and right are some other value
- 12 width, left and right are auto
Absolute Outside its parent on the Bottom Right with 100% left
<!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">
* .parent {
left: 300px;
top: 300px;
position: relative;
height: 140px;
width: 200px;
background: black;
}
* .bottom {
position: absolute;
top: 100%;
margin-top: 5px;
background: red;
}
* .right {
position: absolute;
left: 100%;
margin-left: 5px;
background: red;
}
</style>
</head>
<body>
<div class="parent">Parent
<p class="bottom right">Absolute Outside Bottom Right</p>
</div>
</body>
</html>
Fixed block with width and height to left and bottom
<!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>positioning</title>
<style rel="stylesheet" type="text/css">
body {
background: lightyellow;
}
p {
line-height: 2em;
margin: 10px 10px 10px 110px;
}
div {
width: 100px;
height: 100px;
border: 1px solid rgb(200, 200, 200);
background: pink;
position: fixed;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu
Aenean dictum dolor ut sem.
</p>
<p>
Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel
conubia nostra, per inceptos hymenaeos.
</p>
<div></div>
</body>
</html>
left aligns the left side of an absolute element
<!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>
<style type="text/css">
* .container {
position: relative;
}
* .box {
position: absolute;
overflow: auto;
visibility: visible;
z-index: 1;
left: 300px;
right: auto;
top: 0;
bottom: auto;
width: 220px;
height: 100px;
margin: 10px;
padding: 10px;
background: red;
}
* .before {
z-index: 2;
width: 100px;
height: 400px;
left: 400px;
right: auto;
top: 100px;
bottom: auto;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div>BEFORE</div>
<div class="before">ABSOLUTE BEFORE</div>
<div class="box">this is a test. this is a test. </div>
</div>
</body>
</html>
Positive values offset to the right and negative to the left.
<!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>
<style type="text/css">
div,p,em {
margin: 10px;
padding: 10px;
background-color: white;
border-left: 1px solid gray;
border-right: 2px solid black;
border-top: 1px solid gray;
border-bottom: 2px solid black;
}
* .pos {
position: relative;
left: -100px;
}
</style>
</head>
<body>
<div class="relative">
<p class="pos">Positioned</p>
</div>
</body>
</html>
Relative offset float
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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" media="Screen">
.parent {
width: 600px;
height: 600px;
background: black;
}
* .float {
float: left;
width: 90px;
height: 40px;
background: yellow;
}
* .relative {
position: relative;
background: purple;
}
* .offset2 {
left: -50px;
top: 10px;
background: gray;
}
</style>
</head>
<body>
<div class="parent">
<p class="relative offset2 float">Float </p>
</div>
</body>
</html>
Relative sized offset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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" media="Screen">
.parent {
width: 600px;
height: 600px;
background: black;
}
* .sized {
width: 90px;
height: 40px;
margin-left: auto;
margin-right: 0;
background: pink;
}
* .relative {
position: relative;
background: purple;
}
* .offset3 {
left: 50px;
top: 10px;
background: red;
}
</style>
</head>
<body>
<div class="parent">
<p class="relative offset3 sized">Sized Static </p>
</div>
</body>
</html>
Stacking order of three classes used in div elements in the body
<html>
<head>
<style type="text/css">
.layer1 {
font-size: 190pt;
font-weight: 900;
color: white;
z-index: 1;
position: absolute;
left: -100px;
top: -120px;
background: red;
}
.layer2 {
font-size: 12pt;
font-weight: 500;
color: blue;
z-index: 3;
position: absolute;
left: 40px;
top: 80px;
background: gold;
}
.layer3 {
font-size: 100pt;
font-weight: 300;
color: yellow;
z-index: 2;
position: absolute;
left: -20px;
top: 0px;
background: pink;
}
</style>
</head>
<body>
<div class="layer1"></div>
<div class="layer3">Position</div>
<div class="layer2">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</body>
</html>
Top-left Absolute positioned element
<!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>Absolute Positioning</title>
<style rel="stylesheet" type="text/css">
body {
background: yellowgreen;
}
div {
position: absolute;
background: yellow;
padding: 5px;
width: 100px;
height: 100px;
}
div#top-left {
top: 0;
left: 0;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: pink;
}
</style>
</head>
<body>
<div id="top-left">
Top, Left
</div>
</body>
</html>
use "left" to offset the left side of an element from the left side of its reference position.
<!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>
<style type="text/css">
div,p,em {
margin: 10px;
padding: 10px;
background-color: white;
border-left: 1px solid gray;
border-right: 2px solid black;
border-top: 1px solid gray;
border-bottom: 2px solid black;
}
* .pos {
position: relative;
left: 100px;
}
</style>
</head>
<body>
<div class="relative">
<p class="pos">Positioned</p>
</div>
</body>
</html>
When all four offset properties are specified on the same element both width and height are implied.
<!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-four-copy {
border: 1px solid black;
background: gold;
position: absolute;
left: 20px;
right: 20px;
bottom: 20px;
top: 20px;
border: none;
}
</style>
</head>
<body>
<div>
<p id="offset-four-copy">
When all four offset properties are specified on the same element
both width and height are implied.
</p>
</div>
</body>
</html>
width is auto, both left and right are some other value
<!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>
<style type="text/css">
* .container {
position: relative;
background: black;
}
* .box {
position: absolute;
overflow: auto;
visibility: visible;
z-index: 1;
bottom: 20px;
width: auto;
left: 0;
right: 0;
height: 100px;
margin: 10px;
padding: 10px;
background: red;
}
* .before {
z-index: 2;
width: 100px;
height: 400px;
left: 400px;
right: auto;
top: 100px;
bottom: auto;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div>BEFORE</div>
<div class="before">ABSOLUTE BEFORE</div>
<div class="box">this is a test. this is a test. </div>
</div>
</body>
</html>
width, left and right are auto
<!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>
<style type="text/css">
* .container {
position: relative;
background: black;
}
* .box {
position: absolute;
overflow: auto;
visibility: visible;
z-index: 1;
bottom: 20px;
width: auto;
left: auto;
right: auto;
height: 100px;
margin: 10px;
padding: 10px;
background: red;
}
* .before {
z-index: 2;
width: 100px;
height: 400px;
left: 400px;
right: auto;
top: 100px;
bottom: auto;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div>BEFORE</div>
<div class="before">ABSOLUTE BEFORE</div>
<div class="box">this is a test. this is a test. </div>
</div>
</body>
</html>