博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css之postion定位
阅读量:6587 次
发布时间:2019-06-24

本文共 1144 字,大约阅读时间需要 3 分钟。

css position之初识

我们先看看position定位有那几个属性,下面是我从w3c的截图,为我们认识定位做初步的了解

通过上面这张图嘞,我们知道了position有5个属性,那么下面,我就来具体的说下每个属性的使用。

 

absolute

absolute是在我们需要脱离文档流定位时使用的,话不多说,上代码先

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
  #a{position: relative;width: 200px;height: 200px;background: #4096ee;margin: auto;}
  #b{position: absolute;background: #cda;width: 50px;height: 50px;}
</style>
<body>
  <div id="a">
    <div id="b"></div>
  </div>
</body>
</html>

效果如下:

比如我们刚刚看到的#b的那个div,我们可以通过设置它的top(bottom),left(right)值,使它在#a的任何位置,不管#a怎么的移动,当然,有一个前提,只要父级元素设了position并且不是static(默认既是static),那么上述才成立。

一般而言,我们会用absolute绝对定位做什么呢?顾名思意,定死在某个位置上。对,你没有看错,就是定死在某个位置上。绝对定位是脱离文档流的,也就是说,它不占文档的空间。与float不同,虽然他们都是浮动的,但是float还是在文档内的,并没有脱离。

 

 

fixed

fixed也是脱离文档流的,它与absolute最大的区别在于定位的对象不同,absolute一般是对父元素定位,而fixed是对窗口定位。

我们在很多网站都可以看到,比如在线客服之类的,不管我们的滚动条是往上滚动还是往下,在线客服的那一块都是在窗口的那个位置,不会变动。

 

 

 看到没有,我的滚动条下来了,但是设置了css属性为fixed的div并没有改变在窗口的位置。

 

relative

relative是相对自己原来的位置定位,要是我们不给他设置位移的属性(例如top,left,margin等),那么设置了和没设置是在同一个位置。这里我就不赘述了。

 

以上就是我对定位的一些理解,希望对刚学前端的同学有帮助,也欢迎各路豪杰对我理解错误的地方给予一定的评论。

 

转载于:https://www.cnblogs.com/maomao93/p/6747531.html

你可能感兴趣的文章
堆结构导致数据文件不能收缩
查看>>
linux运维常见英文报错中文翻译(菜鸟必知)
查看>>
微软私有云Azure Pack实践系列之三创建虚拟机角色
查看>>
Exchange 2010 UM角色安装后无法启动服务,错误 1000,1001
查看>>
运维的核心竞争力是什么
查看>>
.NET Micro Framework开发板用户简明手册(v3.0)
查看>>
Gartner:智能SOC/情报驱动的SOC的五大特征
查看>>
iOS开发那些事-iOS应用本地化-资源文件本地化
查看>>
工信部召开地方信息安全工作会议
查看>>
windows7网购火车票全解析
查看>>
实战:在远程网络配置DNS转发
查看>>
作为IT人员,专业和不专业的差别有多大?
查看>>
MAC下安装NDKR10e
查看>>
winform datagridview 合并单元格
查看>>
HDU-1172 猜数字 广搜
查看>>
为 NokiaQt SDK增加新的Sym“.NET研究”bian SDK开发平台
查看>>
c语言动态指针"数组"--一种伪二维数组
查看>>
html基础知识补全
查看>>
Tomcat监控
查看>>
国外金网站
查看>>