CSS Walk 3 Box Position
Box Position
Start with an html file with <div>s
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS course</title>
<link rel="stylesheet" type="text/css" href="./css/styles.css" />
</head>
<body>
<div>
<h2>#1</h2>
</div>
<div>
<h2>#2</h2>
</div>
<div>
<h2>#3</h2>
</div>
<div>
<h2>#4</h2>
</div>
<div>
<h2>#5</h2>
</div>
<div>
<h2>#6</h2>
</div>
<div>
<h2>#7</h2>
</div>
<div>
<h2>#8</h2>
</div>
<div>
<h2>#9</h2>
</div>
<div>
<h2>#10</h2>
</div>
</body>
</html>
and a css file
div {
background: darkcyan;
width: 100px;
height: 100px;
color: white;
font-size: 30px;
}
the browser output
Now lets change the position of the second box with the help of a class (movebox).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS course</title>
<link rel="stylesheet" type="text/css" href="./css/styles.css" />
</head>
<body>
<div>
<h2>#1</h2>
</div>
<div class="movebox">
<h2>#2</h2>
</div>
<div>
<h2>#3</h2>
</div>
<div>
<h2>#4</h2>
...
by css change the position with position:relative
div {
background: darkcyan;
width: 100px;
height: 100px;
color: white;
font-size: 30px;
}
.movebox {
position: relative;
top: -50px;
bottom: 0;
left: 150px;
right: 0;
}
browser output:
The relative position refers the start point where the top,bottom,left,right will refer as a start point, look the space of the #2 box is respeted.
With absolute, the box take the start reference point from the parent in this case <body>
div {
background: darkcyan;
width: 100px;
height: 100px;
color: white;
font-size: 30px;
}
.movebox {
position: absolute;
top: -50px;
bottom: 0;
left: 150px;
right: 0;
}
browser output, check the -50px is considering the body reference.
moving top 150px in absolute.
div {
background: darkcyan;
width: 100px;
height: 100px;
color: white;
font-size: 30px;
}
.movebox {
position: absolute;
top: 150px;
bottom: 0;
left: 150px;
right: 0;
}
browser output:
Let´s put the box inside a parent box to check the effect of relative, absolute code.
div {
background: darkcyan;
width: 100px;
height: 100px;
color: white;
font-size: 30px;
}
.parentbox {
width: 300px;
height: 300px;
background: rgb(87, 83, 83);
}
.movebox {
position: absolute;
top: 0px;
bottom: 0;
left: 0px;
right: 0;
}
Putting relative in parentbox, the child box take his reference of position
div {
background: darkcyan;
width: 100px;
height: 100px;
color: white;
font-size: 30px;
}
.parentbox {
width: 300px;
height: 300px;
background: rgb(87, 83, 83);
position: relative;
}
.movebox {
position: absolute;
top: 0px;
bottom: 0;
left: 0px;
right: 0;
}
parent box relative and movebox relative
div {
background: darkcyan;
width: 100px;
height: 100px;
color: white;
font-size: 30px;
}
.parentbox {
width: 300px;
height: 300px;
background: rgb(87, 83, 83);
position: relative;
}
.movebox {
position: relative;
top: 0px;
bottom: 0;
left: 0px;
right: 0;
}
...
Moving box inside parentbox
div {
background: darkcyan;
width: 100px;
height: 100px;
color: white;
font-size: 30px;
}
.parentbox {
width: 300px;
height: 300px;
background: rgb(87, 83, 83);
position: relative;
}
.movebox {
position: absolute;
top: 50px;
bottom: 0;
left: 25px;
right: 0;
}
Position: fixed
Let remove the parentbox, and the parent <div>
div {
background: darkcyan;
width: 100px;
height: 100px;
color: white;
font-size: 30px;
}
.movebox {
position: fixed;
top: 50px;
bottom: 0;
left: 75px;
right: 0;
}
...
The box #2 stay in the same palce even when moving the vertical scroll.
Position: static
scrolling...
Position: static
div {
background: darkcyan;
width: 100px;
height: 100px;
color: white;
font-size: 30px;
}
.movebox {
position: static;
top: 50px;
bottom: 0;
left: 75px;
right: 0;
}
with static, top, bottom, left, right doesn't work.
float: left
To ordening the position of the elements in a float way, use float
div {
background: darkcyan;
width: 100px;
height: 100px;
color: white;
font-size: 30px;
float: left;
}
.movebox {
position: static;
top: 50px;
bottom: 0;
left: 75px;
right: 0;
}
...
float right
div {
background: darkcyan;
width: 100px;
height: 100px;
color: white;
font-size: 30px;
float: right;
}
.movebox {
position: static;
top: 50px;
bottom: 0;
left: 75px;
right: 0;
}
Using float to order images and paragraphs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS course</title>
<link rel="stylesheet" type="text/css" href="./css/styles.css" />
</head>
<body>
<img src="images/css3.png" alt="css3" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla commodi et
omnis cumque nam maiores ducimus similique libero, beatae magni
accusantium exercitationem. Consequatur quo, voluptatibus quis rerum
maxime sapiente modi.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla commodi et
omnis cumque nam maiores ducimus similique libero, beatae magni
accusantium exercitationem. Consequatur quo, voluptatibus quis rerum
maxime sapiente modi.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla commodi et
omnis cumque nam maiores ducimus similique libero, beatae magni
accusantium exercitationem. Consequatur quo, voluptatibus quis rerum
maxime sapiente modi.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla commodi et
omnis cumque nam maiores ducimus similique libero, beatae magni
accusantium exercitationem. Consequatur quo, voluptatibus quis rerum
maxime sapiente modi.
</p>
</body>
</html>
browser output:
setting img to float: left;
img {
float: left;
}
Setting margin to the images
img {
float: left;
margin-right: 30px;
margin-bottom: 20px;
}
...
Braking the float starting from the second paragraph. clear
img {
float: left;
margin-right: 30px;
margin-bottom: 20px;
}
.clear {
clear: both;
}
...
eot
No hay comentarios:
Publicar un comentario