You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
1.7 KiB
HTML
78 lines
1.7 KiB
HTML
12 months ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>CSSS Common Positioning Properties</title>
|
||
|
|
<link rel="stylesheet" type="text/css" href="./index.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h2>CSS Common Positioning Properties</h2>
|
||
|
|
|
||
|
|
<!-- float property -->
|
||
|
|
|
||
|
|
<h3>Float</h3>
|
||
|
|
<p> The Float property is used for positioning and formatting contnet e,g let an image float left to the text in the container.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
<img src="https://place-puppy.com/450x450" class="img-float" />Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem, exercitationem eveniet pariatur impedit. Architecto quasi itaque, accusantium tenetur. Incidunt, aperiam, reprehenderit. Repudiandae, culpa eos nulla odio. Odio perferendis, accusamus ad. Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis inventore numquam quia, accusantium modi, voluptate assumenda architecto, dicta laboriosam sit sequi perspiciatis quo ab soluta consequuntur, incidunt totam. Tempore, perspiciatis
|
||
|
|
</p>
|
||
|
|
<div class="parent-element">
|
||
|
|
Parent Element
|
||
|
|
<div class="child-one">
|
||
|
|
I'm the child one element
|
||
|
|
</div>
|
||
|
|
<div class="child-two">
|
||
|
|
All eyes on me. Iam the
|
||
|
|
</div>
|
||
|
|
<div class="child-three">
|
||
|
|
I'm the child three.
|
||
|
|
</div>
|
||
|
|
<div class="child-four">
|
||
|
|
I'm the four.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h2>z-index example</h2>
|
||
|
|
<p>
|
||
|
|
Anelement with greater stock order is always above an element eith lower stack order</p>
|
||
|
|
<div class="container">
|
||
|
|
<div class="black-box">Black box (z-index:1)</div>
|
||
|
|
<div class="grey-box">grey box (z-index:2)</div>
|
||
|
|
<div class="green-box">green box (z-index:3)</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|