简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > CSS Tutorial > body text

What is the use of the absolute attribute in the CSS position attribute?

怪我咯
Release： 2017-06-22 10:20:07
Original
3346 people have browsed it

css positioning Parameters: position, left, right, top, bottom

Parameter description:
absolute Parameters are used to specify the positioning method of the block. Top, bottom, left, and right specify the up, down, left, and right coordinates of the block respectively.
Parameter value description.

  • absolute:Absolute positioning

  • ##fixed: Fixed positioning


  • relative: relative positioning


  • static: static positioning

Sample code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>示例网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
.c1{
    width:200px;
    height:150px;
    line-height:75px;
    text-align:center;
    border:1px solid #909;
    position:absolute;
    top:50px;
    left:50px;
}
</style>
</head>
<body>
<div class="c1">
本方块宽200px,高150px，绝对定位于上边50px,左边50px
</div>
</body>
</html>
Copy after login

The above is the detailed content of What is the use of the absolute attribute in the CSS position attribute?. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
css position
source：php.cn
Previous article：In CSS position attribute: how to use fixed Next article：Detailed explanation of positioning attribute position: relative and absolute
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Scale CSS sprites to background images: a guide .my-sprite{background-image:url("https://i.stack.imgur.com/lJpW8.png");height:10...
From 2023-11-02 10:39:28
0
2
288
"Converting JavaScript Variables to PHP: JavasScript variables converted to PHP" So I'm wondering if there is a way to pass Javascript variables into PHP. I'm making a scr...
From 2023-09-18 11:50:08
0
1
183
Tutorial: How to set the color of an ellipsoid in a CZML document? How to specify the color of an ellipsoid in CZML? When I add an entity to the viewer in Ja...
From 2023-09-04 00:02:30
0
1
222
Vuetify cannot load default value in Vue-Toastification What I tried was vue-toastification using a custom component and some Vuetify components i...
From 2023-08-30 19:12:35
0
1
234
New title: My point is: the sticky properties of sticky elements are not preserved when using flexbox I was stuck on this issue for a while and wanted to share this position:sticky+flexbox iss...
From 2023-08-21 23:28:29
0
2
263
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！