css定位及定位和浮动的区别

打开京东网页，你会发现当你向下滚动滚动条，绿色框里的东西会固定在上面显示，并不会随着你向下滚动滚动条就会向上走，就在固定位置显示，还有下面这个广告也是永远在这个位置固定不动，如下图：

如果我们想要让一个盒子在某个位置显示，就需要用到我们接下来要讲的“定位”，下面是定位的属性值：

✍ 属性值介绍：

①position：static；网页默认盒子按照这个属性值去布局，就是从左到右，从上到下排列和布局

②position：absolute；绝对定位，有两种方式：

（1）当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏

（2）有父元素且父元素有定位，参照物是父元素

解释（1）：看下面的有两个橙色的盒子，是兄弟关系没有父元素，这个时候他们的定位就是参照浏览器的左上角位置开始，如果第一个盒子想显示在下图的位置，第二个盒子想显示在下图第二个位置，那他们的定位描述就是：距离左侧300px，距离上面500px的地方；第二个盒子的定位描述就是：距离左侧**px，距离上面**px的地方。图如下所示：

解释（2）：看下面有父元素的子元素盒子，当他有父元素是，他的参照物就是父元素了，如果他想显示在下面这个位置，那么他的定位描述就是：距离父盒子左侧100px，距离父盒子上面100px的地方。图如下所示：

③position：relative；相对定位，参照物是相对于自己原来的位置，比如说将一个盒子向右移5px，向上移6px，这个参照物是对于自己原来的位置，向右向上移。

④position：fixed；固定定位，就是我们上面说的广告一直在右下角显示不动的样子

⑤position：sticky；粘性定位，可以做吸顶效果，如下图所示：刚开始是没有那个“精选-猜你喜欢-智能先锋-居家优品。。。”等这一栏的东西的，当我们向下拉滚动条的时候，他后面就置顶显示在最上面了，当我们再向上拉就又没有了，所以这个置顶效果就是这里所说的粘性定位，可以做吸顶效果。GIF动画如下所示：

定位，偏移当然离不开top left right bottom这些属性，而且这些属性值可以为负值，也就是说top：-100px是成立的

(6) position：inherit；继承父类的属性；

默认的position：static；不支持top、left、right、bottom这些属性，加上了也没用

✍定位属性演示;

①相对定位代码演示

代码演示：

（1）先创建原始的三个盒子

结果：

（2）给第二个盒子加上相对定位position：relative；

结果：

结果总结： 结果显示第二个盒子确实相对于它原来的位置，距离top100px，距离left100px的位置显示，而且第二个盒子动，第三个盒子不受影响，不会跑到第二个盒子原来的位置，是因为虽然第二个盒子跑到了现在的位置，但是它原来的位置它还占着位，举个例子：比如说你今天去你姑姑家住了，但是你家还是有你的房间呀，所以第三个盒子它上不去。

②绝对定位代码演示：position：absolute；

首先演示的是没有父标签的盒子的绝对定位，参照物是浏览器

（1）先创建一个没有父体的盒子

结果：

（2）绝对定位演示：

结果：

结果总结：在没有父盒子的情况下，参照物是浏览器的左上角，代码的含义是相对于top向下移动100px，相对于left向右移动100px

（3）当我们在网页上放一些文字的时候，看看效果如何

结果：

结果总结：结果发现当我们放上文字的时候，最后一行文字其实是显示在这个红色盒子下面的，就是说当我们设置了绝对定位，无论它前后左右有什么东西，这个红色盒子都是算是飘（固定）在上面的，也就是当我们设置了绝对定位，这个盒子就脱离了文档流，就像我们上面刚开始举的那个广告在那个位置固定，而且文章的字都在它下面显示的那个样子。还有一个更加强有力的佐证，当我们把这个文字div标签放在代码<div class="box"></div>下面，发现结果文字还是在最上面显示：

结果：

接下来演示的是有父盒子的子盒子的绝对定位

（1）先创建一个父盒子和子盒子

结果：

（2）绝对定位演示：

我们先让盒子在中间显示，以便于排除以左上角为参照物的嫌疑

结果：

结果总结：要是想让子盒子以父盒子为参照物，就需要给父盒子也加上定位，一般父盒子加上相对定位，而且不用设置top等属性，这时候当子盒子再设置绝对定位时，就是以父盒子为参照物了。

③固定定位

固定定位的跟上面代码一样，将position后面改为fixed就行了，但是注意一点：我们上面举的那个广告在右下角定位的例子，其实理论上是可以用绝对定位的，肯定能用固定定位，但是绝对定位只将广告固定在第一屏，也就是说我们一个网页，肯定有滚动条，很长的网页，当我们将滚动条往下滚滚出第一屏时，那个广告就自然就会跟着第一屏上去了，不会在原来的位置固定不变的，但是我们的固定定位就是一直在一个位置固定，不会有第几屏第几屏的限制。

④粘性定位

代码演示：

我设置了三个盒子一个header部分、一个nav部分、一个body部分，我希望当我将滚动条往下滚得时候中间nav部分就会粘在顶部

结果：

代码演示：想让nav部分粘，就在nav的css身上加

结果：

结果总结：nav的css里面的top：0%的含义是，让这个nav部分距离顶部向下多少的距离粘住，结果发现当前结果就是当你滚动滚动条，红色的部分就粘在顶部不动。

✍定位层级：z-index：数值；属性值越大，层级越大，越靠上显示

代码演示：

结果：结果如下面所见，第一个盒子盖在了第二个盒子上

当我们给第二个盒子也加上相对定位的属性，但是不设置top等属性，看看结果如何：

代码：

结果：

结果发现第二个盒子盖在了第一个盒子上面，这就是后来者居上的道理。

但是如果我们的需求是虽然两个盒子都设置了相对定位，但想让第一个盒子显示在上面，怎么办呢，这时候就用到我们的要说的层级：z-index：数值；这个属性啦。看下面代码让第一个盒子显示在上面：

结果：

属性介绍：z-index：数值；这个属性的属性值可以设置正值也可以设置负值，数值越大越靠上显示。按照上述的代码我们将第一个盒子设置了z-index的属性，如果给第二个盒子也设置这个属性，那么比较的是这个属性的属性值，谁的属性值越大谁就在上面显示，比如第二个盒子设置了z-index：300；比第一个盒子的100要大，那么第二个盒子就在第一个盒子上面显示。

注意点：z-index只有当前面应用了定位才能生效

✍：绝对定位的特殊情况

（1）z-index在绝对定位有父盒子的情况下不生效

代码：

结果：

结果总结：本来创建一个子盒子和一个父盒子，子盒子是显示在父盒子上面的，但是我们想让父盒子显示在子盒子上面，所以我们就给父盒子加了z-index的属性，但是发现不起作用，所以说z-index在绝对定位有父盒子的情况下不生效。但如果想要将父盒子显示在子盒子上面该怎么做呢。解决办法：不在父盒子身上加z-index属性，在子盒子身上加z-index属性，并设置成负值。

（2）绝对定位可以将行内元素设置成块级元素

结果：

结果总结：span标签是一个行内标签，没办法设置宽和高，设置了也不显示，但是加上绝对定位以后就可以由行内元素转化为块级元素，设置宽和高就可以显示了。

这里总结一下：

将行内元素转化为块级元素的方法一共有三种：

（1）加display：block；（2）加position：absolute；（3）加float：left

✍定位实现将盒子水平垂直居中显示：

之前我们可以用margin：0 auto；实现水平居中显示，这次我们可以用定位实现水平垂直居中显示：

（1）只有一个盒子时，实现水平垂直居中显示

思路：

我们先让这个盒子在屏幕的50% 50%处显示，也就是上面这个图，盒子在top的50%处，在left的50%显示，然后再将盒子显示在自己原来位置的一半处，也就是top和left的属性值是负数。见下图：

代码：现在50% 50%处显示

结果：

代码：将50% 50%位置的图形显示在屏幕中间，就是将原来的盒子往左上角返回盒子自身的一半

结果：

（2）有父盒子时，水平垂直居中显示

代码：先创建两个盒子，父盒子和子盒子，让他们水平居中显示

结果：

再给父盒子设置相对定位，给子盒子设置绝对定位，然后按照上面的方法来一遍

结果：

纠正一个错误想法：

下面的margin--left和margin-top不能设置成-50%，不然就错了。

浮动和定位的区别：

代码演示：浮动

结果：

结果显示，第一个盒子浮动起来了，第二个盒子上去了，但是第二个盒子身上的内容环绕第一个盒子显示。

下面我们看定位的：

结果：

结果显示，第一个盒子绝对定位了，第二个盒子上去显示了，但是文字也被第一个盒子给挡住了，所以这就是浮动和绝对定位的区别

总结：

最后说一个小的知识点：图片透明度的属性设置：opacity：数值；（0是完全透明，1是完全不透明）

css定位及定位和浮动的区别相关推荐

css三种定位都脱离文档流了吗,CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别...
1.代码 (1)示例代码1 CSS布局之脱离文档流详解--浮动.绝对定位脱离文档流的区别 .left { width: 300px; height: 500px; background: red; f ...
前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解
前言持续学习总结输出中,今天分享的是Web前端,CSS常用之相对定位和绝对定位的区别,静态定位.子绝父相.固定定位.元素的层级关系的了解 1.定位的基本介绍我们的网页常见布局方式有:标准流.浮动. ...
CSS学习（三）—— 浮动与定位
六.浮动与定位 1.浮动 1)浮动基本概念浮动最本质的功能:用来实现并排浮动使用要点:如若要浮动,并排的盒子都要设置浮动:父盒子要有足够宽度,否则盒子会掉下去浮动的顺序贴靠特性:子盒子会按照顺序 ...
CSS基础: 五种定位以及定位叠放次序
前面看到浮动其实可以让某个盒子模块在某个位置,但是为什么还要右定位? 其实很简单,因为浮动有些定位是解决不了的,比如看下图: 在滑动的时候,你发现了没有,那就是标记的地方,拉动网页都在顶部和侧面,如果 ...
css定位页面元素,页面元素定位-CSS元素基本定位
基本定位 """属性定位一 """ # #通过id # driver.find_element_by_css_selector(" ...
CSS 详细解读定位属性 position 以及参数
Css 详细解读定位属性 position 以及参数 position 定位属性,是CSS中非常重要的属性.除了文档流布局,就是定位布局了.本来我对这个问题没有放在心上,毕竟写了这么多年的css,对p ...
xpath元素和css选择器的定位
我们一般进行元素定位使用xpath和css选择器 1.xpath元素定位 1.什么是xpath? XPath 是一门在 XML 文档中查找信息的语言 XPath即为XML路径语言(XML Path L ...
html列表无序嵌套,HTML/CSS - 如何正确定位这些嵌套的无序列表？
我寻找一些帮助解决与定位包含在其中具有相对定位一个div以下无序列表元素有一个问题IM:HTML/CSS - 如何正确定位这些嵌套的无序列表? 的UL的HTML结构: Your name Your e ...

css定位及定位和浮动的区别

浮动和定位的区别：

css定位及定位和浮动的区别相关推荐

最新文章

热门文章