Heim >Web-Frontend >HTML-Tutorial >Detaillierte Erläuterung der Verwendung des Attributs „Position: Fest'.
Detaillierte Erläuterung der Verwendung des Attributs „Position: Fest'.
- 巴扎黑Original
- 2017-07-18 17:08:172346Durchsuche
<!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'm part one</div>
<div class="part-two" id="part-two">I'm part two</div>
<div class="part-three" id="part-three">I'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'm part one</div>
<div class="part-two" id="part-two">I'm part two</div>
<div class="part-three" id="part-three">I'm part three</div>
</body>
</html>
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Attributs „Position: Fest'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn