css格式布局
一、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格式布局的更多相关文章
- HTML css 格式布局
CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/ 注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...
- CSS样式表与格式布局
样式表 CSS(Cascading Style Sheets 层叠样式表),作用是美化HTML网页. 内联样式表: 例:<p style="font-size:10px;" ...
- 关于CSS格式与布局中的基础知识的简单操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- photoshop将psd导出div+css格式HTML(自动)
psd切片切好后,导出 web格式,存储时选择html.所有切片,然后,选择其他,选择自定,选择切片,选择生成css css命名有2种方式,根据ID和根据类,一般选择根据类(ID尽量少有,防止js要用 ...
- 第五章 CSS页面布局基础
1.标准文档流 在正常流中,在没有使用浮动或者定位的情况下,文本元素按照从上到下.从左到右的格式布局.这是浏览器的默认行为.在正常流中,块级元素从上到下依次排列,而行级元素从左到右依次排列.正常流中的 ...
- 《CSS网站布局实录》学习笔记(五)
第五章 CSS内容排版 5.1 文字排版 5.1.1 通栏排版 进行网页通栏排版时,只要直接将段落文字放置于p或者其他对象中,再对段落文字应用间距.行距.字号等样式控制,便形成了排版雏形. 5.1.2 ...
- 《CSS网站布局实录》学习笔记(四)
第四章 CSS网站元素设计 4.1 网站导航 网站导航是网站中最重要的元素.从形式上看,网站导航主要分横向导航.纵向导航.下拉及多级菜单导航灯3种常见形式. 横向导航:作为门户网站的设计而言,主导航一 ...
- 《CSS网站布局实录》学习笔记(三)
第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3 ...
- 《CSS网站布局实录》学习笔记(二)
第二章 XHTML与CSS基础 2.1 XHTML基础 XHTML是网页代码的核心内容,标准XHTML代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD ...
随机推荐
- zabbix 布署实践【5 使用邮箱SMTP SSL推送告警邮件】
由于传统的邮件推送脚本使用smtp 25端口,在各大邮箱提供商已不适用,已经向SSL过渡,这里以QQ邮箱为例,使用SSL 465端口 登录zabbix-server 进入 cd /usr/lib/za ...
- CodeForces 687C The Values You Can Make
$dp$,背包. $f[i][j][s]$表示前$i$个物品,凑出$j$价格的情况下,能否凑出$s$价格,$f[i][j][s]=1$表示能,否则不能. 转移很简单:如果$f[i][j][s]=1$, ...
- CodeForces 711D Directed Roads
计数,模拟. 首先观察一下给出的图的特点: $1.$一定存在环. $2.$可能存在多个环. 我们对每个环计算方案数,假设环$C$上包含$x$条边,那么把环$C$破坏掉的方案数有${2^x} - 2$种 ...
- openstack私有云布署实践【11.1 计算nova - compute节点配置(科兴环境)】
这里我只使用kxcompute1节点配置为示例,其它节点的配置基本是一样的,只是声明的管理IP不同而已 计算节点 # yum install openstack-nova-compute sysf ...
- Android使用Eclipse遇到"java.lang.ClassNotFoundException"
最近遇到个Android Jar的问题,找了几天才找到root cause. 在此记录下. 我们的Android项目需要使用一个供应商的Jar. 我们使用的开发环境为:Eclipse + ADT插件( ...
- Python学习笔记——基础篇【第五周】——算法(4*4的2维数组和冒泡排序)、时间复杂度
目录 1.算法基础 2.冒泡排序 3.时间复杂度 (1)时间频度 (2)时间复杂度 4.指数时间 5.常数时间 6.对数时间 7.线性时间 1.算法基础 要求:生成一个4*4的2维数组并将其顺时针旋 ...
- [Q]如何将图纸打印为黑白的及设置打印样式
若只是想打印黑白图形,则在“打印样式列表”选择“monchrome.ctb”打印样式即可. 设置其它打印样式:在CAD批量打图精灵主界面下点设置打印样式图标,如下图: 在打开的资源管理器中选择您想要更 ...
- [河南省ACM省赛-第四届] 序号互换 (nyoj 303)
相似与27进制的转换 #include<iostream> #include<cstdio> #include<cstring> #include<strin ...
- ResultSet.TYPE_SCROLL_SENSITIVE问题(完全摘自他人)
摘自CSDN博客 我们先来做一个例子,在例子中我用的是mysql-essential-5.1.30-win32版. 来跟我做以下几个命令: mysql> create database axma ...
- Java版冒泡排序和选择排序
一.理解说明 1.理解和记忆 冒泡排序:依次定位数组元素,每次只和相邻的且符合条件的元素交换位置. 选择排序:依次在数组的每个位置,通过逐个对比选择出最大或最小的元素. 2.知识点说明 (1)数组是引 ...