主要是针对格式布局的一些内容:

1:position:fix

锁定位置（相对于浏览器的位置），例如网上弹出的一些广告

<style type="text/css">

#a

{

    border:2px solid blue;

    height:100px;

    width:100px;

    background-color:#0F6;

    right:60px;

    bottom:70px;

    position:fixed;}

</head>

<body>

<div id="a">今天是个好日子，后面打上n个回车可以明显看出</div>

2.position :absolute

1.外层没有position：absolute（或relative）；那么div相对于浏览器定位，

2.外层有position：absolute（或relative）；那么div相对于外层边框定位，

.b

{

    border:2px solid blue;

    height:100px;

    width:100px;

    background-color:#0F6;

    right:0px;

    bottom:0px;

    position:absolute;}

.c

{

    border:2px solid red;

    width:400px;

    height:200px;}

.d

{

    border:2px solid red;

    width:400px;

    height:200px;

    position:absolute;}    

</style>

</head>

<body>

<div class="b">.b的器相对于整个页面的bc和下面效果相仿</div>

<div class="c">.c的相对于这么多空格结束后的</div>

<div class="c">ccc<div class="b">bbb</div></div>

<div class="d">dddd又来一个</div>

<div class="d">d<div class="b">b</div></div>

3.position: relative

相对位置

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

#aaa

{

    border:2px solid yellow;

    background-color:#9F3;

    height:100px;

    width:100px;

    left:30px;

    top:30px;

    position:fixed;}

#bbb

{

    border:2px solid yellow;

    background-color:#9F3;

    height:100px;

    width:100px;

    left:30px;

    top:30px;

    position:relative;}

</style>

</head>

<body>

<div id="aaa">aaaaaa</div>

<div id="bbb">bbbbbb</div>

<div id="aaa">aiyou<div id="bbb">ganha是b相对a</div></div>

两种情况都试了看一下不同

（二）分层（Z-index）

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

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

只需要把添写上z-index:2就可以了

（三）float：left、right

Left、right时不用给他规定位置（left、top），直接相对于浏览器。若外部被包裹，相对于外部div的除去一行的位置的左上或右上显示。

#cc

{

    border:#0C0 solid 2px;

    height:300px;

    width:100px;

    float:right;}

#dd

{

    border:#0C0 solid 2px;

    height:300px;

    width:100px;

    float:right;}

#ee

{

    border:#0C0 solid 2px;

    height:300px;

    width:100px;

    float:left;}

#ff

{

    border:#0C0 solid 2px;

    height:300px;

    width:100px;

    float:left;}        

</style>

</head>

<body>

<div id="cc">没吃饭 相对游览器</div>

<div id="dd">吃饭了吗</div>

<div id="ee">你好</div>

<div id="ff">我很好</div>

</body>

</html>

　　overflow：hidden；    //超出部分隐藏；scroll，显示出滚动条；

　　<div style="clear:both"></div>   //截断流

3月23 格式布局及relative的更多相关文章

  1. CSS样式表与格式布局

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

  2. Linux自用指令——2019年10月23日

    1.ls ls命令是列出目录内容(List Directory Contents)的意思.运行它就是列出文件夹里的内容,可能是文件也可能是文件夹. ls -a 列出目录所有文件,包含以.开始的隐藏文件 ...

  3. 2016年12月23日 星期五 --出埃及记 Exodus 21:18

    2016年12月23日 星期五 --出埃及记 Exodus 21:18 "If men quarrel and one hits the other with a stone or with ...

  4. [分享] 从定制Win7母盘到封装详细教程 By BILL （ 10月23日补充说明 ）

    [分享] 从定制Win7母盘到封装详细教程 By BILL ( 10月23日补充说明 ) billcheung 发表于 2011-10-23 00:07:49 https://www.itsk.com ...

  5. 11月23日《奥威Power-BI报表集成到其他系统》腾讯课堂开课啦

    听说明天全国各地区都要冷到爆了,要是天气冷到可以放假就好了.想象一下大冷天的一定要在被窝里度过才对嘛,索性明天晚上来个相约吧,相约在被窝里看奥威Power-BI公开课如何?        上周奥威公开 ...

  6. 2016年11月23日 星期三 --出埃及记 Exodus 20:14

    2016年11月23日 星期三 --出埃及记 Exodus 20:14 "You shall not commit adultery.不可奸淫.

  7. 2016年10月23日 星期日 --出埃及记 Exodus 19:7

    2016年10月23日 星期日 --出埃及记 Exodus 19:7 So Moses went back and summoned the elders of the people and set ...

  8. 2016年6月23日 星期四 --出埃及记 Exodus 14:20

    2016年6月23日 星期四 --出埃及记 Exodus 14:20 coming between the armies of Egypt and Israel. Throughout the nig ...

  9. SWT中的布局之-----FormLayout(表格式布局)

    表格式(FormLayout类) 表格式布局管理器,通过创建组件各个边的距离来布局组件,和GridLayout一样强大. 用GridLayout与FormLayout都可以实现相同的界面效果,但有时使 ...

随机推荐

  1. HDU 3333 Turing Tree（树状数组/主席树）

    题意 给定一个长度为 \(n​\) 的序列,\(m​\) 个查询,每次查询区间 \([L,R]​\) 范围内不同元素的和. \(1\leq T \leq 10\) \(1 \leq n\leq 300 ...

  2. Docker：Service

    Prerequisites Install Docker version 1.13 or higher. Get Docker Compose. On Docker for Mac and Docke ...

  3. kubernetes 实战6_命令_Share Process Namespace between Containers in a Pod&Translate a Docker Compose File to Kubernetes Resources

    Share Process Namespace between Containers in a Pod how to configure process namespace sharing for a ...

  4. css display属性

    C:内联元素加上display:block后被块级化.块级元素一般是其他元素的容器,可容纳内联元素和其他块状元素,块级元素排斥其他元素与其位于同一行,width和height起作用.因此,可以定义其宽 ...

  5. 无法获取未定义或 null 引用的属性“contentWindow”

    在iframe 中有时候 这样使用contentWindow 会报   无法获取未定义或 null 引用的属性“contentWindow”   这种情况 我是在IE中遇到 其他浏览器一切正常. pa ...

  6. Python3简单爬虫抓取网页图片

    现在网上有很多python2写的爬虫抓取网页图片的实例,但不适用新手(新手都使用python3环境,不兼容python2), 所以我用Python3的语法写了一个简单抓取网页图片的实例,希望能够帮助到 ...

  7. SpringMVC+fastjson项目配置

    首先这个项目得是maven项目,不是maven项目的自己引包,我就不多说了. <!-- https://mvnrepository.com/artifact/org.springframewor ...

  8. Springboot+JdbcTemplate +thymeleaf 页面 做迷你版的bug系统

    https://www.cnblogs.com/qianjinyan/p/10065160.html  在我上一篇随笔中介绍了关于要做的系统的数据结构,连接如上 今天实现连接mssql server, ...

  9. Oracle(限定查询1)

    3.1.认识限定查询 例如:如果一张表中有100w条数据,一旦执行了“SELECT * FROM 表”语句之后,则将在屏幕上显示表中的全部数据行的记录,这样即不方便浏览,也有可能造成死机的问题出现,所 ...

  10. es6 export 和export default的区别

    区别 export 每个文件中可使用多次export命令 import时需要知道所加载的变量名或函数名 import时需要使用{},或者整体加载方法 export export default 每个文 ...