一、position:fixed

  锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口。

示例

二、position:absolute

  1.外层没有position:absolute(或relative);那么div相对于浏览器定位,如下图中b(距离浏览器右边框为50像素,距离下边框为20像素)。

  2.外层有position:absolute(或relative);那么div相对于外层边框定位,如下图中bb(距离d的右边框50像素,距离d的下边框为20像素)。

示例:

三、position:relative

  相对位置。

  如下图,相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的,那就相对于浏览器进行相对位置的固定。

示例:

四、分层(z-index)

  在z轴方向分层,可以理解为分成一摞纸,层数越高越靠上。

  在上面relative的示例中,我们看到了aa遮住了a,这是因为后写代码的显示级别越靠前,那么在不改变代码顺序的情况下如何让a盖住aa?如下:

示例:

css格式布局的更多相关文章

  1. HTML css 格式布局

    CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/   注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...

  2. CSS样式表与格式布局

    样式表 CSS(Cascading Style Sheets  层叠样式表),作用是美化HTML网页. 内联样式表: 例:<p style="font-size:10px;" ...

  3. 关于CSS格式与布局中的基础知识的简单操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. photoshop将psd导出div+css格式HTML(自动)

    psd切片切好后,导出 web格式,存储时选择html.所有切片,然后,选择其他,选择自定,选择切片,选择生成css css命名有2种方式,根据ID和根据类,一般选择根据类(ID尽量少有,防止js要用 ...

  5. 第五章 CSS页面布局基础

    1.标准文档流 在正常流中,在没有使用浮动或者定位的情况下,文本元素按照从上到下.从左到右的格式布局.这是浏览器的默认行为.在正常流中,块级元素从上到下依次排列,而行级元素从左到右依次排列.正常流中的 ...

  6. 《CSS网站布局实录》学习笔记(五)

    第五章 CSS内容排版 5.1 文字排版 5.1.1 通栏排版 进行网页通栏排版时,只要直接将段落文字放置于p或者其他对象中,再对段落文字应用间距.行距.字号等样式控制,便形成了排版雏形. 5.1.2 ...

  7. 《CSS网站布局实录》学习笔记(四)

    第四章 CSS网站元素设计 4.1 网站导航 网站导航是网站中最重要的元素.从形式上看,网站导航主要分横向导航.纵向导航.下拉及多级菜单导航灯3种常见形式. 横向导航:作为门户网站的设计而言,主导航一 ...

  8. 《CSS网站布局实录》学习笔记(三)

    第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3 ...

  9. 《CSS网站布局实录》学习笔记(二)

    第二章 XHTML与CSS基础 2.1 XHTML基础 XHTML是网页代码的核心内容,标准XHTML代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

随机推荐

  1. Linux软件安装管理 - CentOS

    ---恢复内容开始--- 1. 软件包管理简介 1.1 源码包 - 脚本安装包 1.2 二进制包(RPM包,系统默认包) - 依赖性 2. rpm命令管理(Redhat Package Manager ...

  2. 关于IIS和.NET 4.0的问题总结(转)

    注册asp.net 4.0 到iis   如果没有按照正常的先装iis后装.net的顺序,可以使用此命令重新注册一下 运行->cmd Microsoft Windows [版本 6.1.7601 ...

  3. eclipse安装插件的4种方式

    Eclipse插件的安装方法大体有以下三种:[9] 第一种:直接复制法 假设Eclipse的安装目录在C:\eclipse,解压下载的eclipse 插件或者安装eclipse 插件到指定目录AA(如 ...

  4. Java线程小记

    线程是程序内部不同的执行分支,实现多线程主要有两种方式:继承自Thread类或实现Runnable接口,其实Thread类也是实现了Runnable接口,基于Java的单继承机制,我们建议使用实现Ru ...

  5. Jdk 1.8*安装并配置

     转载自:http://www.cnblogs.com/zlslch/p/5658399.html 简单说下,jdk1.8*的下载,见http://www.cnblogs.com/zlslch/p/5 ...

  6. Python--三元运算与lambda表达式

    三元运算: if 1 ==1: name = 'Tim' else: name = 'SB' 利用三元运算来完成上述4句语句任务: name = 'Tim' if 1==1 else 'SB' lam ...

  7. HDU 1525 Euclid's Game

    题目大意: 题目给出了两个正数a.b 每次操作,大的数减掉小的数的整数倍.一个数变为0 的时候结束. 谁先先把其中一个数减为0的获胜.问谁可以赢.Stan是先手. 题目思路: 无论a,b的值为多少,局 ...

  8. apue学习记录——配置apue.3e,实现P4‘ls例子

    #include"apue.h" #include<dirent.h> int main(int argc,char *argv[]) { DIR *dp; struc ...

  9. hibernate java.sql.SQLException

    异常:java.sql.SQLException oracle.net.ns.NetException java.net.ConnectException 提示:The Network Adapter ...

  10. Toast用法

    应用场景:弹出提示信息 主界面: 代码如下: @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(sa ...