Practice Sheet 15

Static Position

This paragraph is in static position.

Relative Position

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt necessitatibus, quos dolore nesciunt reiciendis vitae iusto eligendi ullam doloribus nisi iure repellat aliquam, voluptatem minima velit accusamus sint incidunt soluta.

This paragraph is in relative position. Notice that it leaves a space between other paragraphs as if it never left its original position.

Fixed Position

Please look at the image at the bottom right which takes you back to the top. It has fixed position which means it is relative to the viewport of this website.

Absolute Position

This paragraph has an absolute position and it is relative to a div element which acts like a container for this paragraph.

Sticky Position

Try scrolling down. It will stick!

More!

This paragraph is sticky!

Z-Index Position

The following collection of cat pictures inside a div box have different z-values. The higher the value, the higher it is placed on the website. A value of -1 will make an element appear behind a text.

Rearrange Photos

Overflow (Scrollbars)

The following paragraphs have the overflow property. This only works on block elements (such as div) with specified height.

This has a value of visible.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos et eos praesentium quisquam magni mollitia laudantium eius sed vitae asperiores possimus, quibusdam eligendi officia quae eveniet! Libero blanditiis fugit est.

This has a value of scroll.

This has a value of auto.

Float

The following are divs with float value equal to left:

There are style attributes that cuts off suceeding elements to wrap to the preceding float elements.The following are div elements with an image that floats followed by another div element that does not:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, eligendi illum dolores iure maiores voluptates eos, quam deserunt libero delectus eaque assumenda cumque. Magni quibusdam recusandae odit suscipit tempore nostrum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, eligendi illum dolores iure maiores voluptates eos, quam deserunt libero delectus eaque assumenda cumque. Magni quibusdam recusandae odit suscipit tempore nostrum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, eligendi illum dolores iure maiores voluptates eos, quam deserunt libero delectus eaque assumenda cumque. Magni quibusdam recusandae odit suscipit tempore nostrum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, eligendi illum dolores iure maiores voluptates eos, quam deserunt libero delectus eaque assumenda cumque. Magni quibusdam recusandae odit suscipit tempore nostrum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, eligendi illum dolores iure maiores voluptates eos, quam deserunt libero delectus eaque assumenda cumque. Magni quibusdam recusandae odit suscipit tempore nostrum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, eligendi illum dolores iure maiores voluptates eos, quam deserunt libero delectus eaque assumenda cumque. Magni quibusdam recusandae odit suscipit tempore nostrum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, eligendi illum dolores iure maiores voluptates eos, quam deserunt libero delectus eaque assumenda cumque. Magni quibusdam recusandae odit suscipit tempore nostrum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, eligendi illum dolores iure maiores voluptates eos, quam deserunt libero delectus eaque assumenda cumque. Magni quibusdam recusandae odit suscipit tempore nostrum!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic animi vero distinctio totam ratione vitae error consectetur saepe omnis. Excepturi ad debitis cupiditate non et accusantium iusto aliquid quidem placeat!

Add a class and style it with overflow auto to add the image inside the border of the div.

The following are float examples with grid boxes. By adding a clearfix for the div encasing it, errors will not occur.

Some content inside the box.

The following are the same dog images again side by side with a grid layout.

The following uses CSS flex to make a flex-container and not a grid-clearfix. This allows the change in height of the containing boxes if the browser window changes in size.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quaerat cumque dicta harum esse, quae corrupti aut reiciendis, provident eius facilis dolorem praesentium ipsam ullam maxime consequuntur vero ab earum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos amet consequatur consectetur praesentium a minus fuga incidunt ab aut. Molestiae impedit quis harum magni. Obcaecati atque a harum debitis magnam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem ducimus, rerum fugit, qui quaerat harum id quibusdam tempora suscipit libero facere consectetur vel eius ipsam voluptatibus corporis doloremque perspiciatis ipsa? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere unde explicabo tempora quas quia veniam illo, minus natus soluta tempore officia ipsum sit laudantium aliquam ad ipsa fugit repellendus animi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque iste, sed atque error repudiandae recusandae culpa reiciendis voluptatibus ducimus quis. Odit cum eos consectetur deleniti eveniet culpa quam necessitatibus praesentium?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique mollitia enim voluptate eligendi in quibusdam, ipsam earum inventore consectetur, harum consequuntur saepe dolorem quae perspiciatis facilis eveniet molestias necessitatibus omnis? Lorem ipsum, dolor sit amet consectetur adipisicing elit. At nisi a quis dolor, magnam optio accusamus illo facere eveniet aliquid corrupti animi porro facilis repellendus, culpa magni consequuntur consequatur. Velit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum nam officia doloribus, id alias illum ratione suscipit itaque enim architecto corrupti possimus quod. Illum, ab. Ullam suscipit consequatur possimus est!

Lorem ipsum dolor sit amet consectetur adipisicing elit. A cupiditate voluptatibus, unde eveniet suscipit nemo? Nisi natus voluptatibus id voluptas quia doloribus! Vel voluptates saepe quam minima veritatis hic sint!

CSS Layout I