Posicionamiento CSS

Display

La propiedad CSS display especifica si un elemento es tratado como un elemento:

block: hace que el comportamiento del elemento sea como un bloque.
inline: el elemento se renderizará en línea con otros elementos.
inline-block: fluyen con el texto y demás elementos como si fueran elementos en-línea y además respetan el ancho, el alto y los márgenes verticales.

Elementos block por defecto:

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<ul>

<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<section>
<table>
<tfoot>
<video>

<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>

Elementos inline por defecto:

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<time>

<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<tt>

<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<var>

Float

La propiedad float especifica si un elemento debe salir del flujo normal y aparecer a la izquierda o a la derecha de su contenedor, donde los elementos de texto y los en línea aparecerán a su alrededor.

Clear

La propiedad CSS clear especifica si un elemento puede estar al lado de elementos flotantes que lo preceden o si debe ser movido (cleared) debajo de ellos.

Ejemplo de clase

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="header">
        <h1>Titulo de pagina</h1>
    </div>

    <div class="contenedor">

        <!--div class="box box1">

        </div>

        <div class="box box2">

        </div-->

        <div class="main">
            <h2>Titulo</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos, quis, odio vero repellendus quos adipisci inventore reiciendis sapiente distinctio laboriosam nulla minus est hic pariatur velit praesentium? Consectetur assumenda iusto libero tenetur quaerat quod ipsum eum dolor dicta modi amet architecto, sit sapiente iste, corporis dolorum officia esse dignissimos est laborum hic? Enim maxime deleniti voluptas quaerat excepturi fugit eum sint earum, recusandae quisquam sapiente, commodi animi rerum corrupti modi cupiditate deserunt eveniet totam quidem voluptates necessitatibus magni veniam quas similique! Eum aperiam voluptatem molestiae error eligendi quod culpa commodi ipsam, dignissimos quae, in saepe aspernatur consequuntur magni obcaecati mollitia?</p>
            
        </div>

        <div class="sidebar">
            <ul>
                <li> Link 1 </li>
                <li> Link 2 </li>
            </ul>
        </div>

    </div>
    
</body>
</html>

style.css

.header{
    box-sizing: border-box;
    width: 100%;
    background-color: lightblue;
    border: 1px solid blue;
}

.contenedor{
    box-sizing: border-box;
    width: 100%;
    background-color: grey;
    border: 4px solid black;
    height: 500px;
}

/*.box{
    display: block;
    width: 150px;
    height: 150px;
    border: 1px solid black;
}

.box1{
    background-color: red;
    float: right;
}

.box2{
    background-color: blue;
    float: left;
    clear: right;
} */

.main {
    float:left;
    box-sizing: border-box;
    width: 80%;
    border: 1px solid red;
}

.sidebar{
    float: right;
    box-sizing: border-box;
    width: 20%;
    border: 1px solid blue;
}

Position

La propiedad position de CSS especifica cómo un elemento es posicionado en el documento. Las propiedades top, right, bottom, y left determinan la ubicación final de los elementos posicionados.

Un elemento posicionado es un elemento cuyo valor computado de position es relative, absolute, fixed, o sticky. (En otras palabras, cualquiera excepto static).

relative: el desplazamiento es con respecto a su posición original.
absolute: su desplazamiento es con respecto al primer contenedor padre que se encuentre posicionado.
fixed: su desplazamiento es con respecto a la ventana del navegador
sticky: el elemento es tratado como un relative hasta que cruza un límite establecido (por top, bottom, left o right) y pasa a ser tratada como un fixed.

Ejemplo de clase:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="box box1">

    </div>
    <div class="box box2">
        
    </div>
    <div class="box box3">
        
    </div>
    <div class="box box4">
        
    </div>

    <div class="contenedor">
        <div class="box box1">
            
        </div>
    </div>
    
</body>
</html>

style.css

*{
    margin: 0
}
.box{
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    border: 1px solid black;
}

.box1{
    position: absolute;
    right: 0px;
    background-color: #f0808077;
}

.box2{
    position: relative;
    left: 40%;
    background-color: #03c4c477;
}

.box3{
    position: fixed;
    background-color: #90ee9099;
    bottom: 10px;
    right: 10px;

}

.box4{
    width: 100%;
    position: sticky;
    top: 0px;
}

.contenedor{
    position: relative;
    width: 50%;
    height: 5000px;
    border: 1px solid black;
}

DWFS