CSS 固定定位和模式转换
2018-12-11 本文已影响31人
roy_pub
和浮动一样，绝对定位和固定定位，可以让块元素转化为行内块元素
两个块级元素，依次排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.leftAdv {
width: 100px;
height: 100px;
background-color: red;
position: fixed;
top: 100px;
left: 20px;
}
.rightAdv {
width: 100px;
height: 100px;
background-color: red;
position: fixed;
top: 100px;
right: 20px;
}
.nav {
height: 80px;
background-color: pink;
}
.container {
width: 960px;
height: 3000px;
background-color: green;
}
</style>
</head>
<body style="height: 3000px">
<div class="leftAdv"></div>
<div class="rightAdv"></div>
<div class="nav"></div>
<div class="container"></div>
</body>
</html>
块级元素转为行内块元素，宽度为0，界面看不到效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.leftAdv {
width: 100px;
height: 100px;
background-color: red;
position: fixed;
top: 100px;
left: 20px;
}
.rightAdv {
width: 100px;
height: 100px;
background-color: red;
position: fixed;
top: 100px;
right: 20px;
}
.nav {
height: 80px;
background-color: pink;
/*行元素转化为行内块元素，宽度为实际内容宽度，没有设定宽度*/
position: fixed;
}
.container {
width: 960px;
background-color: green;
height: 3000px;
}
</style>
</head>
<body style="height: 3000px">
<div class="leftAdv"></div>
<div class="rightAdv"></div>
<div class="nav"></div>
<div class="container"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.leftAdv {
width: 100px;
height: 100px;
background-color: red;
position: fixed;
top: 100px;
left: 20px;
}
.rightAdv {
width: 100px;
height: 100px;
background-color: red;
position: fixed;
top: 100px;
right: 20px;
}
.nav {
height: 80px;
background-color: pink;
/*行元素转化为行内块元素，宽度为实际内容宽度，没有设定宽度*/
position: fixed;
/*设定宽度，占据一行*/
width: 100%;
}
.container {
width: 960px;
background-color: green;
height: 3000px;
}
</style>
</head>
<body style="height: 3000px">
<div class="leftAdv"></div>
<div class="rightAdv"></div>
<div class="nav"></div>
<div class="container"></div>
</body>
</html>
