CSS的position设置-优快云博客

本文通过实例详细介绍了CSS中position属性的应用，包括relative、absolute、fixed等不同定位方式的特点及如何使用它们来实现页面布局。文章展示了如何利用这些属性创建相对定位的标题、绝对定位的侧边栏以及固定定位的页眉和页脚。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS的position设置:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<style type="text/css">
    h1{
        /*设置为relative一般是为其他元素作为基础;*/
        position:relative;
        width:100%;
        border-bottom:1px dashed #999999;
    }
    h1 span.date{
        position:absolute;
        bottom:0;
        right:0;
        font-size:.5em;
        background-color:#E9E9E9;
        color:black;
        padding:2px 7px 0 7px;
    }
</style>
</head>
<body>
<h1><span class="date">Nov.10,2016</span>CosmoFarmer Bought By Google</h1>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<style type="text/css">
#contentWrapper{
    /*设置为relative一般是为其他元素作为基础;*/
    position:relative;
}
#leftSidebar{
    /*设置为absolute，其他元素都不知道他的存在;*/
    position:absolute;
    left:0;
    top:0;
    width:200px;
}
#rightSidebar{
    position:absolute;
    right:0;
    top:0;
    width:200px;
}
#main{
    /*设置margin可以空出有效的位置留给其他元素;*/
    margin-left:200px;
    margin-right:200px;
}
</style>
</head>
<body>
<div id='banner'>banner</div>
<div id='contentWrapper'>
    <div id='main'>main</div>
    <div id='leftSidebar'>leftSidebar</div>
    <div id='rightSidebar'>rightSidebar</div>
    <div id='footer'>footer</div>
</div>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<style type="text/css">
#banner{
    /*设置为fixed位置固定不变*/
    position:fixed;
    left:0;
    top:0;
    width:100%;
}
#sidebar{
    position:fixed;
    left:0;
    top:110px;
    width:175px;
}
#footer{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
}
#main{
    margin-left:190px;
    margin-top:110px;
}
</style>
</head>
<body>
<div id='banner'>banner</div>
<div id='main'>main
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id='sidebar'>sidebar</div>
<div id='footer'>footer</div>
</body>
</html>