FundamentosHTML/position.html at main · LiraU13/FundamentosHTML · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="es">
<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>Positions</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        header, footer {
            width: 100%;
            height: 50px;
            background-color: indianred;
        }
        #container {
            margin: 0 auto;
            width: 500px;
            height: 500px;
            border: 1px solid black;
            position: relative;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            right: 100px;
            bottom: 100px;
        }
        footer {
            position: fixed;
            bottom: 0;
        }
    </style>
</head>
<body>
    <header>Header</header>
    <section id="container">
        <div class="item"></div>
    </section>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae praesentium quasi tempora et necessitatibus ab esse, provident quo consequuntur repellendus. Nulla perspiciatis, at magni labore omnis nihil nisi numquam rem quibusdam eaque asperiores dolore? Eligendi eos dolorem doloribus atque, hic quidem amet perspiciatis, quas tempora, optio blanditiis et. Distinctio molestiae, doloremque minima sequi repellendus aliquid aspernatur repellat iste beatae hic tenetur dicta sunt ipsam itaque architecto at reiciendis provident corrupti! Voluptatum, delectus neque architecto dignissimos, reiciendis officiis mollitia, excepturi fuga modi officia esse! Dolorem asperiores fuga eligendi ipsa facilis, laboriosam ad, consequatur quaerat placeat explicabo recusandae sed temporibus. Neque quisquam laborum vero accusamus ratione praesentium, minus reiciendis veritatis perspiciatis iste culpa atque doloremque minima molestias rerum eum alias quam est dolore quasi. Exercitationem soluta, iure, culpa obcaecati dolores, eius sapiente maiores quia animi perspiciatis minus itaque nemo quos nobis autem debitis eaque ad atque! Doloremque deleniti eveniet deserunt rerum, aperiam incidunt. Accusantium impedit quasi perferendis, eveniet accusamus sunt, earum voluptatibus eius ipsum recusandae, illum in minus excepturi nulla magnam quis explicabo quos voluptate voluptatum magni. Aliquid at, sunt quam aperiam nobis aut excepturi nisi quaerat doloribus quo dicta asperiores, itaque porro qui maiores exercitationem, doloremque inventore ut dolorem deleniti consectetur. Vel, asperiores. Vel modi quae sapiente, consequuntur aliquid dicta quos repellendus natus velit unde maiores magnam temporibus quaerat. Odit nulla illo, ratione provident esse similique minus pariatur, natus, iusto explicabo exercitationem inventore. Id, aliquid vel distinctio, dignissimos, reiciendis ea iure ipsa quia deserunt quae ratione ullam laboriosam ut soluta beatae rerum quod accusamus eius aperiam quam necessitatibus numquam. Vel ullam recusandae ea dolores asperiores. Suscipit eaque voluptas nihil itaque fuga quos animi omnis, earum beatae commodi harum corporis architecto obcaecati corrupti porro minus deserunt? Laborum eligendi consequatur architecto cumque veritatis molestias quasi reiciendis adipisci exercitationem impedit nisi qui, ratione temporibus iusto fugit. Autem quasi libero asperiores ipsum pariatur vitae dolore similique eum sed. Assumenda, in aut! Officiis totam, architecto consequatur natus ipsa numquam fugit nulla saepe voluptatibus illum eos aspernatur exercitationem debitis dolores amet placeat autem molestias, ut laborum neque quae! Nobis architecto vel doloremque labore est voluptatibus culpa asperiores voluptatem tenetur ratione facere, a iste! Vero repellat ipsa, ad cumque voluptates ipsam saepe sint assumenda corrupti quibusdam doloremque! Cum quas doloremque possimus obcaecati aspernatur est adipisci nemo, pariatur, quod laboriosam corporis placeat consequuntur eligendi soluta maxime aliquid officia id esse? Voluptatum, hic fuga. Iusto molestias ipsa voluptates illo praesentium error dolore dolores impedit, excepturi voluptatem dolorem blanditiis provident in molestiae natus amet, pariatur eius repellat ipsum possimus quod quis dignissimos. Omnis consequatur eius modi, tempore assumenda sunt aliquam explicabo dolore quidem nesciunt, nulla numquam. Labore tenetur consequuntur rem nesciunt facere enim quidem laudantium natus, aspernatur distinctio similique, delectus illum facilis? Veritatis, cumque laboriosam? Perferendis ab voluptates sed maxime nesciunt eaque qui aspernatur velit, nisi harum perspiciatis tempora iusto officia ratione earum dolorum. Tempore porro nesciunt praesentium et explicabo cupiditate, ipsa exercitationem, ipsum provident facilis consequuntur veritatis suscipit, nihil nam! Nostrum illo modi perspiciatis enim eligendi doloribus. Magni, ab veniam.</p>
    <footer>Footer</footer>
</body>
</html>