#yyds干货盘点# 前端歌谣的刷题之路-第一百三十二题-定位-z-index

1 year ago

source link: https://blog.51cto.com/u_14476028/5783057
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

#yyds干货盘点# 前端歌谣的刷题之路-第一百三十二题-定位-z-index

精选原创

前端歌谣 2022-10-21 15:41:51 ©著作权

文章标签 html 属性设置 文章分类 云平台云计算 阅读数163

我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣

z-index属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上面。z-index可以设置为负数，且该属性只能作用于定位元素。
现在给"img"图片标签添加"position: absolute"、"left: 0px"和"top: 0px"属性，此时会发现图片被定绝对定位在了页面的左上角，并且遮挡住了下方的内容。现在继续给图片标签添加"z-index: -1"属性，现在图片堆叠在了字体内容的下方。
完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

#yyds干货盘点# 前端歌谣的刷题之路-第一百三十二题-定位-z-index_属性设置

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>z-index</title>
</head>
<style type="text/css">margin: 0;
padding: 0;
}
img{
position:absolute;
left:0;
top:0;
z-index:-1;
}
</style>
<body>
<h1>The countdown to Christmas starts here.</h1>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1912%2F1135-191202143454.jpg&refer=http%3A%2F%2Fuploads.xuexila.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639984107&t=eca951193e736a17eb96278117bcfb1f" width="100">
<p>由于图像的 z-index 是 -1，因此它在文本的后面出现</p>
</body>
</html>

Recommend