文档章节

Html CSS学习(五)position定位

AzureMonkey
 AzureMonkey
发布于 01/14 21:07
字数 669
阅读 14
收藏 0

Html CSS学习(五)position定位

position用来对元素进行定位,其值有以下几种:

  • static:无特殊定位,对象遵循正常文档流,top,right,bottom,left等属性不会被应用。
  • relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。
  • absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。
  • fixe:对象脱离正常文档流,使用top,right,botton,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。

一、static定位

页面代码如下:

<div class="father">
        <div class="children">
            子容器1
        </div>
        <div class="children">
            子容器2
        </div>
    </div>

CSS代码如下:

<style>
        .father{
            width: 200px;
            height: 300px;
            border: 1px solid red;
        }
        .children{
            margin: 10px;
            width: 150px;
            height: 100px;
            border: 1px solid blue;
        }
    </style>

页面效果如下:

从上面页面的结果可以看出,Html文档流默认的定位即是static,元素按照其默认的规则进行定位。

二、relative定位

下面,首先修改第一个子容器,将其position更改为relative,并设置其top,left属性。

CSS样式设置如下:

.father div:first-child{
            position: relative;
            top: 30px;
            left: 30px;
        }

页面效果如下:

从上图可以看出,relative,仍然遵循正常的文档流,所以它的位置依然保留,但是它会依照top,left,bottom,right等属性,相对于其原来的位置进行偏移。

三、absolute定位

如果将子容器1的定位更改为absolute,则页面效果如下:

从中可以看出,它不再遵循正常的文档流,其原始位置被占据。它是绝对定位,它以浏览器的左上角为参照点进行定位。而relative是相对定位,它是相对于其自身的原始位置进行定位,也就是说,它以没有使用relative定位时的位置左上角为参照点进行定位。

四、fixed

对象将脱离正常的文档流,它能浏览器窗口左上角为参考点进行定位,并且如果页面出现滚动条时,它并不会随滚动条的移动而滚动,它始终以浏览器窗口左上角为参考点进行定位,与其父容器无关。常用于制作固定导航条等内容。

© 著作权归作者所有

共有 人打赏支持
AzureMonkey
粉丝 16
博文 42
码字总数 27688
作品 0
新乡
其他
私信 提问
07/24 CSS中position总结

我们常常使postion用于层的定位,有时一个布局中有几个小对象,不易用css padding margin进行定位,这个时候我们就可以使用position的absolute、relative(绝对定位、相对定位)来轻松搞定。...

Winnie007
2016/07/27
12
0
web前端小案例-爱新鲜抽屉式特效

用简短的javascript代码编写出爱新鲜抽屉式特效 知识点:企业布局技巧,如何高效的编写CSS样式,常用选择器,基本标签,动态布局,盒子模型,jquery类库调用,JS特效编写,JS编程思维等。 ?...

急速奔跑中的蜗牛
2017/12/04
0
0
CSS制作水平垂直居中对齐各种方法总结

标签: 杂谈 分类: 网页前端 方法一: 这种方法用来实现单行垂直居中是相当的简单的,你只要保证元素内容是单行,并且其高度是固定不变的,你只要将其“line-height”设置成和“height”值一...

未央花开
2014/04/01
0
0
CSS 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题

一: 右侧固定宽度 左侧自适应   第一种方法:左侧用margin-right,右侧float:right 就可以实现。   CSS代码可以如下写: 如上代码就可以实现效果。 第2种方法:左侧同样用margin-right ...

喵王不瞌睡
2014/10/23
0
0
图片轮播之:静若处子,动若脱兔(为什么我不来写一篇关于图片轮播的博客呢?)

一、闲聊: 图片轮播,一个你再熟悉不过的小东西了。或许在你刚开始学习web的时候就能做出来得到效果。但是你会发现当面对不同的需求的时候又要重新写一个轮播。很是麻烦的对吧。LZ也是这样学...

乐派电影
2014/04/21
0
5

没有更多内容

加载失败,请刷新页面

加载更多

看过上百部片子的这个人教你视频标签算法解析

本文由云+社区发表 随着内容时代的来临,多媒体信息,特别是视频信息的分析和理解需求,如图像分类、图像打标签、视频处理等等,变得越发迫切。目前图像分类已经发展了多年,在一定条件下已经...

腾讯云加社区
41分钟前
2
0
2. 红黑树

定义:红黑树(Red-Black Tree,简称R-B Tree),它一种特殊的二叉查找树(Binary Search Tree)。 要理解红黑树,先要了解什么是二叉查找树。在上一章中,我们学习了什么是二叉树,以及二叉树...

火拳-艾斯
42分钟前
2
0
input的button类型,点击页面跳转

一、input type=button 不做任何操作 例如: <input type="button" class="btn btn-primary" style="width: 30%" value="返回" onclick="window.location.href='/users/list'"></input> onc......

Sunki
48分钟前
1
0
踩坑:js 小数运算出现精度问题

背景 在学习小程序商城源码时发现了这个问题,单价可能出现小数,小数之间运算结果会莫名其妙多出一大串数字,比如下面这样👇。 在此之前我是知道 js 中著名的 0.1 + 0.2 != 0.3 的问题的,...

dkvirus
54分钟前
2
0
zookeeper和HBASE总结

zookeeper快速上手 zookeeper的基本功能和应用场景 zookeeper的整体运行机制 zookeeper的数据存储机制 数据存储形式 zookeeper中对用户的数据采用kv形式存储 只是zk有点特别: key:是以路径...

瑞查德-Jack
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部