CSS provides various properties to control the layout and positioning of elements on a webpage. Here are the key properties you mentioned:
1. Position
The position property specifies the type of positioning method used for an element. There are several types of positioning:
- static: Default value. Elements are positioned according to the normal flow of the document.
- relative: Elements are positioned relative to their normal position. Offset properties (top, right, bottom, left) will cause the element to be adjusted away from its normal position.
- absolute: Elements are positioned relative to the nearest positioned ancestor (non-static). If there is no such ancestor, it is positioned relative to the initial containing block (typically the viewport).
- fixed: Elements are positioned relative to the browser window. They remain in the same position even if the page is scrolled.
- sticky: Elements are positioned based on the user's scroll position. They toggle between relative and fixed, depending on the scroll position.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Position</title>
<style>
/* Static position (default) */
.static {
position: static;
background-color: lightblue;
}
/* Relative position */
.relative {
position: relative;
left: 20px;
background-color: lightgreen;
}
/* Absolute position */
.absolute {
position: absolute;
top: 50px;
left: 50px;
background-color: lightcoral;
}
/* Fixed position */
.fixed {
position: fixed;
bottom: 10px;
right: 10px;
background-color: lightgoldenrodyellow;
}
/* Sticky position */
.sticky {
position: -webkit-sticky;
/* For Safari */
position: sticky;
top: 0;
background-color: lightsalmon;
padding: 50px;
}
</style>
</head>
<body>
<div class="static">Static Position</div>
<div class="relative">Relative Position</div>
<div class="absolute">Absolute Position</div>
<div class="fixed">Fixed Position</div>
<div class="sticky">Sticky Position</div>
<p>Scroll down to see the sticky effect.</p>
</body>
</html>
2. Z-Index
The z-index property specifies the stack order of an element. Elements with a higher stack order appear in front of elements with a lower stack order. Note that z-index only works on positioned elements (position other than static).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Z-Index</title>
<style>
.box {
position: absolute;
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
top: 50px;
left: 50px;
z-index: 1;
}
.box2 {
background-color: blue;
top: 70px;
left: 70px;
z-index: 2;
}
.box3 {
background-color: green;
top: 90px;
left: 90px;
z-index: 3;
}
</style>
</head>
<body>
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</body>
</html>
3. Float and Clear
The float property is used for positioning and formatting content. Elements are floated horizontally, this means that an element can be moved as far left or right as possible, allowing other elements to wrap around it.
- left: The element floats to the left of its container.
- right: The element floats to the right of its container.
- none: The element does not float (default).
- inherit: The element inherits the float value of its parent.
The clear property specifies on which sides of an element floating elements are not allowed to float.
- left: No floating elements allowed on the left side.
- right: No floating elements allowed on the right side.
- both: No floating elements allowed on either the left or the right side.
- none: Default value. Allows floating elements on both sides.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Float and Clear</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 10px;
}
.left {
float: left;
background-color: lightcoral;
}
.right {
float: right;
background-color: lightblue;
}
.clear {
clear: both;
background-color: lightgreen;
padding: 10px;
}
</style>
</head>
<body>
<div class="box left">Float Left</div>
<div class="box right">Float Right</div>
<div class="clear">Cleared Both</div>
</body>
</html>
5. Overflow
The overflow property specifies what should happen if content overflows an element's box.
- visible: The overflow is not clipped. The content renders outside the element's box (default).
- hidden: The overflow is clipped, and the rest of the content will be invisible.
- scroll: The overflow is clipped, but a scrollbar is added to see the rest of the content.
- auto: Similar to scroll, but it adds scrollbars only when necessary.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Overflow</title>
<style>
.overflow-auto {
width: 200px;
height: 100px;
overflow: auto;
background-color: lightblue;
}
.overflow-hidden {
width: 200px;
height: 100px;
overflow: hidden;
background-color: lightcoral;
}
.overflow-scroll {
width: 200px;
height: 100px;
overflow: scroll;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="overflow-auto">
This box has overflow: auto. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean commodo ligula eget
dolor. Aenean massa.
</div>
<div class="overflow-hidden">
This box has overflow: hidden. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean commodo ligula
eget dolor. Aenean massa.
</div>
<div class="overflow-scroll">
This box has overflow: scroll. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean commodo ligula
eget dolor. Aenean massa.
</div>
</body>
</html>
No comments:
Post a Comment