4.4.1. display
<!doctype html>
<html>
<!-- Write your code below -->
<head> <link rel="stylesheet" href="style.css">
<body>
<div class="container">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
</body>
</head>
</html>
/* Write your code below */
.container {
display: inline;
}
p:first-child {
color: red;
display: inline;
text-shadow: 1px 1px 2px red;
}
p:nth-child(2) {
text-transform: uppercase;
display: inline;
color: blue;
}
4.4.2. display
<!doctype html>
<html>
<!-- Write your code below -->
<head> <link rel="stylesheet" href="style.css"></head>
<body>
<div class="container">
<span>Apple</span>
<span>Banana</span>
<span>Orange</span>
</div>
</body>
</html>
/* Write your code below */
span:first-child {
text-align: center;
color: red;
display: block;
}
span:nth-of-type(even) {
text-align: right;
border: 1px solid blue;
display: block;
}
4.4.3. float
<!doctype html>
<html>
<!-- Write your code below -->
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="float-left-container">
<div class="float-left">
<img src="logo.svg" alt="Image floating to the left"/>
</div>
<p>The float CSS property positions an element to the left of its container if it's float property is set to left and it allows the text to wrap around the floated element. When an element is floated it is taken out of the normal flow of the document.This is an example of elment floating to the left and text wrapping around it.</p>
</div>
<div class="float-right-container">
<div class="float-right">
<img src="logo.svg" alt="Image floating to the right" />
</div>
<p>The float CSS property positions an element to the right of its container if it's float property is set to right and it allows the text to wrap around the floated element. When an element is floated it is taken out of the normal flow of the document.This is an example of elment floating to the right and text wrapping around it.</p>
</div>
</body>
</html>
/* Write your code below */
.float-left-container,.float-right-container {
border: 1px solid blue;
margin-bottom: 5px;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
4.4.4. clear
/* Write your code below */
.left-floated, .right-floated {
border: 1px solid blue;
margin-bottom: 20px;
}
.float-left {
float: left;
width: 50px;
height: 50px;
background-color: blue;
}
.float-right {
float: right;
width: 50px;
height: 50px;
background-color: red;
}
.clear-left {
clear: left;
}
.clear-right {
clear: right;
}
4.4.5. Static positioning
<!doctype html>
<html>
<!-- Write your code below -->
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
</body>
</html>
/* Write your code below */
.box1 {
width: 150px;
height: 150px;
background-color: black;
color: white;
position: static;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
color: white;
position: static;
}
4.4.6. Relative positioning
<!doctype html>
<html>
<!-- Write your code below -->
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="p-static">This is a normal div with static positioning</div>
<div class="p-relative">This is a special div with relative positioning</div>
</body>
</html>
/* Write your code below */
body {
background-color: black;
color: white;
}
.p-static {
position: static;
border: 2px solid black;
background-color: black;
color: white;
}
.p-relative {
position: relative;
border: 2px dotted red;
background-color: black;
color: white;
top: 20px;
left: 40px;
}
4.4.7. Fixed positioning
/* Write your code below */
body {
height: 1500px;
margin: 0;
padding: 30px;
}
.navbar {
position: fixed;
top: 0;
background-color: black;
width: 100%;
}
.navbar a {
float: left;
color: white;
padding: 15px 18px;
text-decoration: none;
}
.main-content {
padding-top: 100px;
}
4.4.8. Absolute positioning
<!doctype html>
<html>
<!-- Write your code below -->
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="top-right">Top Right</div>
</div></body>
</html>
/* Write your code below */
.container {
position: relative;
width: 300px;
height: 200px;
background-color: black;
}
.top-right {
background-color: red;
color: white;
position: absolute;
top: 0;
right: 0;
padding: 10px;
}
4.4.9. Sticky positioning
/* Write your code below */
body{
height: 1500px;
margin: 0;
}
.sticky-navbar {
position: sticky;
top: 0;
left: 10px;
background-color: black;
padding: 10px;
}
a {
color: white;
text-decoration: none;
padding: 12px 14px;
}
4.4.10. z-index
<!doctype html>
<html>
<!-- Write your code below -->
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
</body>
</html>
/* Write your code below */
.box1{
width:100px;
height:100px;
background-color:black;
color:white;
border:1px solid white;
position: absolute;
z-index: 4;
}
.box2{
width:100px;
height:100px;
background-color:white;
border:2px solid black;
position:relative;
top:30px;
z-index:2;
}
