Skip to content

Instantly share code, notes, and snippets.

@furenku

furenku/pos.css

Created March 10, 2018 20:13
Show Gist options
  • Save furenku/da707462e18e16945f3d376ab6ebb245 to your computer and use it in GitHub Desktop.
Save furenku/da707462e18e16945f3d376ab6ebb245 to your computer and use it in GitHub Desktop.
Download ZIP
posicionamiento CSS
Raw
pos.css
* {
outline: 1px solid blue;
}
.contenedor {
/*m100*/
margin: 100px;
/*bgc#eee*/
background-color: #eee;
/*bd*/
border: 10px solid red;
}
#contenedor-A .caja {
/*poss*/
position: static;
/* el valor por defecto.
las cosas no estan posicionadas,
por lo que aparecen despues de lo anterior
*/
}
#contenedor-B .caja {
/*posr*/
position: relative;
/*t50*/
top: 50px;
/*l100*/
left: 100px;
}
#contenedor-B2 .caja:nth-child(1) {
/*posr*/
position: relative;
/*t50*/
top: 50px;
/*l100*/
left: 100px;
}
#contenedor-B2 .caja:nth-child(2) {
/*posr*/
position: relative;
/*t50*/
bottom: 50px;
/*l100*/
right: 100px;
}
#contenedor-C .caja,
#contenedor-C2 .caja {
/*posa*/
position: absolute;
/*t32*/
top: 32px;
/*l32*/
left: 32px;
}
#contenedor-C2 {
position: relative;
}
#contenedor-D {
/*posf*/
position: fixed;
top: 32px;
left: 200px;
}
#contenedor-E {
/*pos*/
position: sticky;
top: 200px;
}
Raw
pos.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Posicionamiento</title>
<!-- link -->
<link rel="stylesheet" href="css/02-posicionamiento.css">
</head>
<body>
<!-- #contenedor-A.contenedor>(.caja>lorem18)*2 -->
<div id="contenedor-A" class="contenedor">
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea minus quia temporibus nostrum voluptate quo ipsam obcaecati doloribus.
</div>
<div class="caja">
Repellendus inventore, quibusdam vel, officia doloribus dolorem. Ex consequuntur officia sunt quis atque non illo dolore. Quas, aut!
</div>
</div>
<div id="contenedor-B" class="contenedor">
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea minus quia temporibus nostrum voluptate quo ipsam obcaecati doloribus.
</div>
<div class="caja">
Repellendus inventore, quibusdam vel, officia doloribus dolorem. Ex consequuntur officia sunt quis atque non illo dolore. Quas, aut!
</div>
</div>
<div id="contenedor-B2" class="contenedor">
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea minus quia temporibus nostrum voluptate quo ipsam obcaecati doloribus.
</div>
<div class="caja">
Repellendus inventore, quibusdam vel, officia doloribus dolorem. Ex consequuntur officia sunt quis atque non illo dolore. Quas, aut!
</div>
</div>
<div id="contenedor-C" class="contenedor">
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea minus quia temporibus nostrum voluptate quo ipsam obcaecati doloribus.
</div>
<div class="caja">
Repellendus inventore, quibusdam vel, officia doloribus dolorem. Ex consequuntur officia sunt quis atque non illo dolore. Quas, aut!
</div>
</div>
<div id="contenedor-C2" class="contenedor">
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea minus quia temporibus nostrum voluptate quo ipsam obcaecati doloribus.
</div>
<div class="caja">
Repellendus inventore, quibusdam vel, officia doloribus dolorem. Ex consequuntur officia sunt quis atque non illo dolore. Quas, aut!
</div>
</div>
<div id="contenedor-D" class="contenedor">
CONTENEDOR D
</div>
<div id="contenedor-E" class="contenedor">
STICKY
</div>
<div class="choro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias perferendis commodi placeat odio soluta impedit officia, mollitia praesentium, doloremque fugit atque nihil, rem vero vitae obcaecati doloribus quidem magni nemo illo dolor dolores cupiditate debitis fuga omnis. Consequatur itaque ex saepe, recusandae. Laborum perspiciatis obcaecati provident ut asperiores amet adipisci voluptates deserunt a veritatis atque eligendi quod autem, suscipit ipsa, nihil eius. Ratione amet consectetur ullam nam tempora provident beatae repellendus officia eum assumenda cumque ut minus atque, ex necessitatibus, eos illum sequi porro! Temporibus quos quibusdam, consequuntur eum qui adipisci maiores dolores nulla alias aspernatur nesciunt quam quae, laboriosam officiis eveniet iure veniam! Distinctio atque fugit animi magni fuga cumque a harum, eius cupiditate quo placeat labore blanditiis ipsa ut commodi accusantium fugiat qui tenetur dolores, quod nemo, eos! Id sed perspiciatis sint voluptas laboriosam iste beatae tempore minima, optio delectus. Rerum accusamus praesentium eveniet quo voluptas, sequi fugiat est nisi nesciunt dolorem esse minus aliquid et iste, modi aliquam eos? Non consequatur dolorem, eius, perspiciatis, quo quod impedit accusamus explicabo commodi sunt voluptatum autem beatae nesciunt corporis, alias in odio aspernatur incidunt quibusdam deleniti. Nostrum, ducimus cum magnam sequi saepe ut accusantium labore quisquam rem? Dolorem vero vitae, quae hic neque nulla, est quisquam debitis modi aut iure culpa, maiores ut sequi fugiat pariatur soluta voluptatibus ad voluptas ipsum nihil nam? Illo delectus veritatis, obcaecati aut, odio, corporis consequuntur molestiae explicabo, laboriosam omnis fugiat. Adipisci fugiat accusamus odio omnis qui, consequuntur vero id aliquam magnam totam nisi necessitatibus voluptatem reprehenderit veritatis veniam eos provident magni corporis officiis sapiente odit. Voluptates hic voluptatum, dicta, commodi nam ab error dolore facere! Nesciunt mollitia ullam culpa distinctio dicta dignissimos fuga ducimus ratione, dolores architecto fugit voluptatum pariatur laborum tenetur harum sunt enim quis. Est autem asperiores iste eaque aut nostrum temporibus inventore? Sunt obcaecati ab quae atque, pariatur quos molestiae eveniet reprehenderit non, officiis laborum aspernatur. Aliquam nihil tempore fuga, provident dolorem similique quos unde repudiandae ipsum, consequuntur, libero beatae inventore veniam, corporis accusantium obcaecati numquam delectus. Velit similique quam possimus ab aperiam, repellat consequatur. Veritatis illum reprehenderit odio quae, molestias eos vitae numquam dolorum quisquam velit temporibus architecto repellendus nesciunt enim. Voluptas sunt non, quae suscipit velit dolore nam ea illo, rerum doloremque dolorem, sequi repudiandae maiores earum laborum at deserunt in neque sit quia aliquid eos delectus ab! Tempore minima dolore nulla, sint, velit pariatur et! Maiores quaerat deleniti consequuntur libero odit obcaecati qui dolore eligendi fuga ut ullam soluta nostrum dicta numquam est ducimus temporibus, praesentium tenetur ex at, reiciendis, quos porro quidem voluptas sunt. Dolor aut ipsum amet ab autem consequuntur commodi eum, repudiandae nihil adipisci perspiciatis, ea. Sunt animi veritatis at amet fugit nesciunt laborum excepturi iure repellat id numquam adipisci libero mollitia necessitatibus repellendus pariatur minus architecto asperiores quisquam dignissimos recusandae eveniet, praesentium totam laboriosam eaque. Voluptate, aliquam. Ducimus aperiam odit eligendi, consectetur deserunt libero quaerat, quas voluptatum doloremque ea sed. Recusandae consequatur ut animi velit perferendis voluptates, facere officia at minima cupiditate, eligendi odio ipsum autem. Facere iure odit officia aut, ipsa, dolorum reprehenderit accusamus numquam aspernatur error nesciunt quod tenetur vitae. Reiciendis corporis, ad totam quis dolore minus esse itaque velit. Adipisci, accusantium. Mollitia laboriosam, unde voluptates eius quasi deserunt quidem veniam. Sunt repudiandae reprehenderit dicta quasi consectetur impedit velit est, ea sapiente rerum vitae vel esse, enim nobis dolorem neque corporis ad repellendus. Eveniet ipsum molestias eum laborum expedita numquam velit esse ipsam, omnis laboriosam aliquam dolorem voluptate error placeat perferendis quod voluptates nemo corrupti quaerat ut distinctio, tempora possimus! Ipsam obcaecati, debitis perspiciatis voluptas voluptatum necessitatibus corporis excepturi porro animi. Ratione architecto inventore ad velit nihil. Dolores dolore facilis, sequi provident praesentium? Vero impedit delectus, nam velit magni dolorum, quo deserunt asperiores dolor minima inventore saepe voluptates reiciendis amet obcaecati tenetur unde! Ex rerum iusto ducimus corrupti? Voluptas molestias est alias, reprehenderit facere consequatur totam earum dolore dolores suscipit illo commodi perferendis praesentium veritatis exercitationem minima explicabo illum hic. Id nisi delectus incidunt beatae, modi nihil eaque dolorem eveniet eligendi doloremque quae, deleniti quod iste facilis quibusdam optio. Hic sed nobis eum perferendis illum est, pariatur molestiae excepturi labore veniam quasi reprehenderit saepe sapiente alias nesciunt exercitationem, iusto consectetur? Repellat amet velit nulla dolorum iure quod doloremque culpa dolores aliquam illum! Cumque harum beatae unde, exercitationem architecto aspernatur nulla labore laboriosam a corporis iste quod quisquam expedita laudantium, animi, esse natus, nisi fugit autem error odio enim deserunt. Incidunt ab laudantium dolor repudiandae quo dolores blanditiis ipsa repellat eum vel ex magni, perferendis quae quis est voluptatibus rerum vitae, tempora omnis temporibus quisquam doloremque architecto. Voluptate iure harum maiores est, amet obcaecati sapiente, perferendis aspernatur inventore architecto asperiores ipsum dolore delectus tempora sed cum ea id, repellendus quaerat tenetur quis nemo veritatis error. Totam minus laborum dolorem dignissimos labore numquam impedit voluptatum? Explicabo est quos quod debitis fuga incidunt, cum cupiditate quam odit voluptatum temporibus at non veritatis, cumque, adipisci, nesciunt modi natus. Qui deserunt maxime beatae culpa repudiandae impedit. Quasi, rerum alias dicta nulla. Soluta in veniam voluptas reprehenderit ut incidunt culpa suscipit nostrum temporibus ducimus non eum illo, quam repellat odit obcaecati, enim cumque, blanditiis corrupti iure omnis voluptate libero fuga adipisci. Nobis voluptate debitis facere ipsam tempore reprehenderit ratione ut nam itaque, quae libero beatae, alias aspernatur sit. Quidem sit consequatur necessitatibus aut, quae facere eligendi dolor delectus consequuntur alias tempore illum quia laborum quos iusto facilis, ad veniam expedita praesentium unde quasi iste. Sapiente, minus perspiciatis quos delectus porro, ab, aliquam quas expedita et molestiae commodi animi similique veniam fuga dolorum. Expedita accusantium quaerat et totam, distinctio, vel obcaecati dolores! Itaque magnam eveniet vitae quisquam, ratione. Consequatur vel, illo atque eum maiores, inventore placeat natus facilis rem minus, officiis impedit assumenda nam molestiae praesentium odit, ratione saepe. Accusamus consequuntur totam voluptas incidunt eligendi, veritatis commodi minima, facilis vitae voluptates vel deserunt similique tempora quae delectus in ipsam obcaecati, magnam illum modi placeat ratione dolor minus molestias saepe! Maiores officiis beatae soluta autem placeat reprehenderit assumenda animi fuga!</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment