Home > Article > Web Front-end > CSS positioned elements

CSS positioned elements

WBOYforward: 2023-09-16 09:01:091217browse

The position attribute is used to position elements. i.e. the following are positioned elements -

static - The element box is laid out as part of the normal document flow, as follows the element before and the element after the previous.
relative - The element's box is laid out as part of the normal flow and then offset by some distance.
Absolute - The element's box is laid out relative to its containing block and is completely removed from the normal flow of the document.
Fixed - The element's box is absolutely positioned, with all the behaviors described for Position: Absolute.

The following is the code for positioning elements using CSS -

Example

Live demonstration

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   color: white;
   text-align: center;
   height: 100px;
   width: 100px;
}
.static {
   position: static;
   background-color: greenyellow;
}
.relative {
   position: relative;
   left: 50px;
   background-color: rgb(255, 47, 47);
}
.absolute {
   position: absolute;
   right: 50px;
   top: 20px;
   background-color: hotpink;
}
</style>
</head>
<body>
<h1>Position elements example</h1>
<div class="static">STATIC</div>
<div class="relative">RELATIVE</div>
<div class="absolute">ABSOLUTE</div>
</body>
</html>

Output

The above code will produce the following output -

CSS 定位元素

The above is the detailed content of CSS positioned elements. For more information, please follow other related articles on the PHP Chinese website!

css Static position

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to select all child elements of an element (except the last one) using CSS?Next article：How to select all child elements of an element (except the last one) using CSS?

See more

CSS positioned elements

Example

Output

Related articles