Home > Article > Web Front-end > Detailed explanation of usage of position: fixed attribute

Detailed explanation of usage of position: fixed attribute

巴扎黑Original: 2017-07-18 17:08:172247browse

<!DOCTYPE html>
<html>
<head>
<title>当锚点定位遇上position: fixed</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
position: relative;
}

a {
color: white;
text-decoration: none;
}

.nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: black;
}

.part-one,
.part-two,
.part-three {
width: 100%;
height: 800px;
}

.part-one {
background-color: red;
padding-top: 100px;
}

.part-two {
background-color: blue;
padding-top: 100px;
margin-top: -100px;
}

.part-three {
background-color: yellow;
padding-top: 100px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="nav">
<a href="#part-one">part one</a>
<a href="#part-two">part two</a>
<a href="#part-three">part three</a>
</div>
<div class="part-one" id="part-one">I&#39;m part one</div>
<div class="part-two" id="part-two">I&#39;m part two</div>
<div class="part-three" id="part-three">I&#39;m part three</div>
</body>
</html>

<!DOCTYPE html>
<html>

	<head>
		<title>CSS解决有固定导航时链接锚点定位偏移</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				position: relative;
			}
			
			a {
				color: white;
				text-decoration: none;
			}
			
			.nav {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100px;
				background-color: black;
			}
			
			.part-one,
			.part-two,
			.part-three {
				width: 100%;
				height: 800px;
			}
			
			.part-one {
				background-color: red;
				padding-top: 100px;
			}
			
			.part-two {
				background-color: blue;
				padding-top: 100px;
				margin-top: -100px;
			}
			
			.part-three {
				background-color: yellow;
				padding-top: 100px;
				margin-top: -100px;
			}
		</style>
	</head>

	<body>
		<div class="nav">
			<a href="#part-one">part one</a>
			<a href="#part-two">part two</a>
			<a href="#part-three">part three</a>
		</div>
		<div class="part-one" id="part-one">I&#39;m part one</div>
		<div class="part-two" id="part-two">I&#39;m part two</div>
		<div class="part-three" id="part-three">I&#39;m part three</div>
	</body>

</html>

The above is the detailed content of Detailed explanation of usage of position: fixed attribute. 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

Previous article：Share some tips on how to write IE browser compatibility issuesNext article：Share some tips on how to write IE browser compatibility issues

See more

Detailed explanation of usage of position: fixed attribute

Related articles