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>

CSS的position设置的更多相关文章

  1. css中的四个不同的position设置

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  2. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  3. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  4. 十步图解CSS的position

    CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...

  5. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  6. CSS之Position详解

    CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属性包括盒型结 ...

  7. CSS的position(位置)

    position: 位置,absolute绝对位置,相对于浏览器边界的位置:relative相对位置,相对于它本应该出现的位置.fixed:固定位置,它不会随着滚动. 设置好position之后,就可 ...

  8. Css元素居中设置

    你对DIV CSS居中的方法是否了解,这里和大家分享一下,用CSS让元素居中显示并不是件很简单的事情,让我们先来看一下CSS中常见的几种让元素水平居中显示的方法. DIV CSS居中 用CSS让元素居 ...

  9. 关于CSS 的position定位问题

    对于初学者来说,css的position定位问题是比较常见的.之前搞不清楚postion定位是怎么回事,排版一直歪歪斜斜的,老是排不好 css的定位一般来说,分为四种: position:static ...

随机推荐

  1. 进程间通信——FIFO（多个客户进程，一个服务进程）

    FIFO简介 FIFO就是Unix的一种复合POSIX标准的进程间通信机制.他又称为命名管道,跟管道的不同点是,每个FIFO都有一个路径名与之关联. FIFO虽然有路径名,但是他这中文件是在内核态(管 ...

  2. Android - Get Bluetooth UUID for this device

    Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join th ...

  3. CSS中margin和position:relative的定位问题

    一.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  4. 攻入Javascript，究竟什么是AJAX

    什么是AJAX 时隔半年,当AJAX再一次出现在我脑海中时,从最初的模糊到现在的越来越明确.那么究竟什么是AJAX?它和form表单提交有什么区别? 如果你使用过AJAX和表单提交的话,想必会发现一件 ...

  5. Selinux是什么?

    在新的基于RHEL一般都自带了selinux,多数情况下我们把selinux禁用了,事实上既然RHEL要集成它,必然有他的优点和长处,我们通过下文来了解selinux,也许你会喜欢用上它. 英文原文来 ...

  6. awk命令详解二

    awk命令详解 简单使用: awk :对于文件中一行行的独处来执行操作 . awk -F :'{print $1,$4}'   :使用‘:’来分割这一行,把这一行的第一第四个域打印出来 . 详细介绍: ...

  7. MySQL 索引的使用

    一.or 的使用 (1)MySQL版本大于 5.x 的会使用 index merge 功能,即可以将多个单列索引集合起来使用,不过在查询时使用 or 的话,引擎为 myisam 的会开启 index ...

  8. Jquery使用常见(全)

    一.选择器实例 语法 描述 $(this) 当前 HTML 元素 $("p") 所有 <p> 元素 $("p.intro") 所有 class=&q ...

  9. jQuery扩展两类函数（对象调用，静态调用）

    作者:zccst 先看小例子: $(function(){ //扩展方式1-通过对新调用 $.fn.each1=function(){ console.log("hehehehe$.fn.f ...

  10. Delphi 与 DirectX

    关于DirectX 在Delphi下的使用 源:Delphi 与 DirectX