Rumah > hujung hadapan web > tutorial css > CSS如何进行绝对定位

CSS如何进行绝对定位

清浅
Lepaskan: 2019-01-11 13:32:08
asal
7833 orang telah melayarinya

absolute属性表示绝对定位,通过top、left、bottom、right值来设置它们相对于最近的祖先元素的位置

CSS如何进行绝对定位

【推荐课程:CSS教程

绝对定位元素的位置与文档流无关,因此它不占据任何空间。当一个元素被设置为绝对定位时将会从文档流中完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{width:100px;
height: 100px;
background-color: pink;
}
.child{
position: absolute;
background-color: skyblue;
top:50px;
left: 50px;
}
</style>
</head>
<body>
<div>父元素
<div>子元素</div>
</div>
</body>
</html>
Salin selepas log masuk

效果图:

CSS如何进行绝对定位

由以上的示例可以看出绝对定位就是相对于最近的祖先元素,如果元素没有已定位的祖先元素,则会相对于最初的包含块(画布或HTML元素)

注意:绝对定位与文档流无关,所以它可以覆盖页面上的元素,所以我们可以设置z-index 属性来控制内容的堆放次序

Atas ialah kandungan terperinci CSS如何进行绝对定位. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan