Home > Article > Web Front-end > How to implement fixed positioning in css? (code example)
How to implement fixed positioning in css? (code example)
- 青灯夜游Original
- 2018-09-18 16:58:494143browse
This chapter uses examples to introduce how to achieve fixed positioning in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Set box2 to fixed positioning:
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>定位</title>
<style media="screen">
.box1{
width:100px;
height: 100px;
background-color: rgb(184, 208, 162);
}
.box2{
width:100px;
height: 100px;
background-color: rgb(231, 223, 143);
position:fixed;
left: 100px;
top: 100px;
}
.box3{
width:100px;
height: 100px;
background-color: rgb(188, 211, 213);
}
span{
background-color: rgb(209, 198, 209);
}
</style>
</head>
<body>
<div>
<div>
</div>
<div>
<div>
</div>
</div>
<span>span元素</span>
</div>
</body>
</html>Output:
Fixed positioning will always be positioned relative to the browser window;
Fixed positioning will be fixed At a certain position in the browser window, it will not scroll with the scroll bar;
The above is the detailed content of How to implement fixed positioning in css? (code example). For more information, please follow other related articles on the PHP Chinese website!
Statement：
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