一、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. 在ubuntu14.04上安装openstack mitaka

    最近在工作环境安装部署了juno版本,在GE口测试网络性能不太满意,发现mitaka版本支持ovs-dpdk,于是抽时间安装实验一番. 参考官网的安装文档,先准备将mitaka版本安装好再配置ovs. ...

  2. TODO:字节序的一些理解

    TODO:字节序的一些理解 本文是小编对字节序的片面理解,希望对你有帮助哈. 字节序,即字节在电脑中存放时的序列与输入(输出)时的序列是先到的在前还是后到的在前. 1.Little endian:将低 ...

  3. 用python做中文自然语言预处理

    这篇博客根据中文自然语言预处理的步骤分成几个板块.以做LDA实验为例,在处理数据之前,会写一个类似于实验报告的东西,用来指导做实验,OK,举例: 一,实验数据预处理(python,结巴分词)1.对于爬 ...

  4. C#模板打印功能-模板为WPS或Excel

    //---WPS----- using EtApp = ET; using System.Reflection; using System.Runtime.InteropServices; using ...

  5. centos7 安装openvswitch

    安装 1.安装依赖包:yum -y install openssl-devel wget kernel-devel 2.安装开发工具:yum groupinstall "Developmen ...

  6. drupal 连表查询+分页

    $query = db_select('Table','t'); $query->join('Table_A','a','on条件); $query->join('Table_B','b' ...

  7. centos7下用yum安装mysql5.7

    1.安装mysql源 下载地址:http://dev.mysql.com/downloads/repo/yum/ 下载之后用yum安装:yum localinstall -y xx.noarch.rp ...

  8. MySQL的备份和恢复

    MySQL的备份和恢复 备份数据:mysqldump –uroot –p123456 dbname table [option] > dbname.sql mysqldump常用参数option ...

  9. jquery.validationEngine

    引入库文件 <!DOCTYPE html> <head> <!--jQuery--> <script type="text/javascript&q ...

  10. Spring Aop详尽教程

    一.概念 AOP(Aspect Oriented Programming):面向切面编程. 面向切面编程(也叫面向方面编程),是目前软件开发中的一个热点,也是Spring框架中的一个重要内容.利用AO ...