文档流:

文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列。块元素占一行,行内元素在一行之内从左到在排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。

关于定位:

可以使用css的position属性来设置元素的定位类型,position设置项如下:

(1)relative 生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移。

(2)absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。

(3)fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。

(4)static 默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性。(少用)

(5)inherit 从父元素继承position属性的值。(少用)

定位元素的偏移:

定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style type="text/css">
.con{
width:400px;
height:400px;
border:1px solid #000;
margin:50px auto 0;
/* 3.父级设置相对定位 */
/*position:relative;*/
} .box01,.box02{
width:300px;
height:100px;
margin:10px;
} .box01{
background-color:green;
/* 1.相对定位 */
/*position:relative; */
/*left:50px;*/
/*top:50px;*/ /* 2.绝对定位 相对于body进行定位 */
/*position:absolute;*/
/*left:50px;*/
/*top:50px;*/ /* 3.父级设置相对,子集设置绝对 */
/*position:absolute;*/
/*left:50px;*/
/*top:50px;*/ /* 4.固定定位 */
position:fixed;
left:50px;
top:50px; } .box02{
background-color:gold;
} </style>
</head>
<body>
<div class="con">
<div class="box01"></div>
<div class="box02"></div>
</div> </body>
</html>

效果:

定位元素层级:

定位元素是浮动的正常的文档流之上的,可以用z-index属性来设置元素的层级

如:

.box01{

......

position:absolute;  /* 设置了绝对定位 */

left:200px; /* 相对于参照元素左边向右偏移200px */

top:100px; /* 相对于参照元素顶部向下偏移100px */

z-index:10; /* 将元素层级设置为10 */

}

定位元素特性:

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

css 定位布局的更多相关文章

  1. CSS定位布局

    CSS定位布局 基础知识 在CSS布局中,定位布局也是一种非常常见的技术手段,我们以京东为例: 上面是非常好的例子,对于定位布局来说它可以将一个元素放在页面上的任意一个位置. 但是定位布局也不能滥用, ...

  2. CSS高级布局

    float属性 基本浮动规则 先来了解一下block元素和inline元素在文档流中的排列方式. block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽 ...

  3. web开发:定位布局

    一.盒子的显隐 二.小米topbar 三.相对定位 四.决定定位 五.固定定位 六.z-index属性 七.流式布局思想 八.hover父子悬浮 一.盒子的显隐 1.同一结构下, 如果采用浮动布局,所 ...

  4. 奇妙的CSS之布局与定位

    前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...

  5. CSS之定位布局(position,定位布局技巧)

    css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...

  6. HTML学习笔记 css定位(静态,相对,固定,绝对布局)偏移案例 第十二节 (原创) 参考使用表

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

  7. html5 css练习 定位布局

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

  8. 认识CSS中布局之文档流、浮动、定位以及叠放次序

    前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...

  9. CSS定位与布局:浮动

    浮动的特点   浮动(float)属性提出的作用是实现文字的环绕效果,一个元素浮动后,会脱离普通流.主要的特点如下: 浮动的元素会向左或者向右移动直到它的外边缘接触容器框(containing blo ...

随机推荐

  1. Windows启动过程(MBR引导过程分析)

    catalogue . 电脑启动过程 . MBR分析(master boot record) - 位于整个硬盘的 扇区 . DBR(DOS boot record) - 位于柱面0,磁头1,扇区1,即 ...

  2. Hive SQL 分类

    题目: 请使用Hive SQL实现下面的题目. 下面是一张表名为user_buy_log的表,有三个字段,user(用户),grp(分组编号),time(购物时间). 需要将用户按照grp分组,对ti ...

  3. js中的简单数据类型和复杂数据类型的存储

    基本类型存储的是值而复杂数据类型也叫引用类型存储的是对象的地址如0x00001而在栈中存的是变量数值和函数参数 堆中存的是对象和数组 堆栈空间分配 栈(操作系统):由操作系统自动分配释放 ,存放函数的 ...

  4. vue中使用swiper-slide时,循环轮播失效?

    前言 vue 项目中使用时,组件swiper-slide 如果用v-for循环的话,loop:true 就不能无缝轮播,每次轮播到最后一张就停止了??? 正文 代码如下: <swiper :op ...

  5. Wndows下Apache+php+Mysql环境的搭建及其涉及的知识(转)

    一.安装Apache 1. 在网上搜索以下3个文件,以及找一个地方新建一个文件夹 好吧,这里有下载链接:http://pan.baidu.com/s/1hr9IdSS 文件夹内有:apache,mys ...

  6. 微信小程序scroll-view(或者其他view) 计算高度 px转rpx有关

    wx.getSystemInfo({ success: function (res) { that.globalData.winWidth = res.windowWidth; that.global ...

  7. # 20175333曹雅坤《Java程序设计》第1周学习总结

    教材学习内容总结 1.学习第一章PPT,安装JRE,JDK并配置path环境参数 2.在windows上使用dos命令运行教材第一章代码Hello.java和People.java 3.下载使用git ...

  8. pyhton之Reportlab模块

    reportlab模块是用python语言生成pdf文件的模块 安装:pip install reportlab 模块默认不支持中文,如果使用中文需要注册 1.注册中文字体 下载自己需要的.ttf字体 ...

  9. css之字体的引用

    font-family 属性设置文本的字体系列. font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体. 注意: 如 ...

  10. ModuleNotFoundError: No module named 'video_back.urls'

    新建Django项目时将settings,urls移除来时报错. 这是我所想要的项目结构  >>>  扁平结构. 将下面这个应用的名字删掉就可以了.