首页 编程语言 css

前端技术分享：Css定位(css包含块)

在css众多属性中，定位position属性，必须有姓名，而且占据了比较重要的地位，比如：二级，三级导航效果，鼠标悬停的一些动态效果，悬停栏，侧边导航栏定位效果等等都是需要定位实现的。

但是很多小伙伴，刚接触定位的时候，理解上会有一些困惑，使用上容易出bug，那我们今天就来聊一下定位position属性；

1、定位的历史

W3C（万维网联盟）组织于1998年5月发布了CSS2版本，CSS2规范在很大程度上扩展了CSS1中的内容。它包括数十种新的属性（和伪元素），以及现有属性的很多附加值，其中就包括 定位属性。

2、浏览器的支持

所有主流浏览器都支持 position 属性。

3、position属性的语法

position 属性：规定元素的定位类型

属性值：

static：默认值。没有定位，元素出现在正常的流中。

relative：生成相对定位的元素，相对于其正常位置进行定位。

fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位。

absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

sticky （css3中新增的属性值）: 粘性定位，该定位基于用户滚动的位置。

4、定位需要配合使用的属性

left 属性:规定元素的左边缘偏移的大小。

right 属性规定元素的右边缘偏移的大小。

top 属性规定元素的顶部边缘偏移的大小。

bottom 属性规定元素的底部边缘偏移的大小。

以上属性用于给元素定位设置坐标点的位置；

属性值：

auto： 默认值。通过浏览器计算左边缘的位置。

%： 设置以包含元素的百分比计的左边位置。可使用负值。

length： 使用 px、cm 等单位设置元素的左边位置。可使用负值。

5、了解编程中的坐标

  • 编程中的坐标，x轴-水平轴右为正，左为负，Y轴-垂直轴下为正，上为负

  • 每个元素都自带一个坐标系，元素左上角的位置为原点（0）位置，如下图所示

6、 分别介绍定位属性每个属性值的使用语法

  • position:static 静态定位

position属性的默认值，即没有定位，遵循正常的文档流对象。

遵循正常的文档流对象，可以理解为，元素的位置根据在html中的书写顺序依次排序显示，没有特殊的位置改变

  • position:relative 相对定位

生成相对定位的元素，相对于其正常位置进行定位。

基本使用讲解：

例如：一个img元素在没有设置定位时，正常显示在浏览器中，自带坐标系，

如图显示；

给img元素设置相对定位，设置定位的坐标为（100px,100px），美女的位置会从原本原点的位置移动到（100px,100px）的位置，会发生如下变化：

代码实现如下：

 html： <img src="timg.jpg" alt="" />
 css ： img {
   // img元素进行相对定位
   position: relative;
  // 定位的坐标（相对于自身位置左边100px，相对于自身位置上面100px的位置定位）
   left: 100px;
   top: 100px;
 }

相对定位对元素在文档流中的影响

元素仍然保持其未定位前的形状，它原本在文本流中所占的空间仍保留

例如：在img标签下面书写一个span标签，img在定位之后，原本的位置空间依旧是保留在文本流中的，写在img下面的span是没有上去的；

代码实现如下：

<img src="timg.jpg" alt="" />
<span>~~~~~~~我是写在img下面的文本亚~~~~~~~~</span>
 css ： img {
   // img元素进行相对定位
    position: relative;
  // 定位的坐标（相对于自身位置左边100px，相对于自身位置上面100px的位置定位）
    left: 100px;
    top: 100px;
 }
  span {
    background: lemonchiffon
 }

效果如下：

  • position: absolute 绝对定位

生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。

解释：指绝对定位元素会根据有定位设置（除static定位）的父元素作为参照进行定位；如果父元素没有定位设置，那就继续向上找祖父元素，看是否有定位设置，有的话就根据祖父元素定位，没有的话，那就继续向上找…….如果都没有，就根据html进行定位。

包含块：绝对定位元素参照的有定位设置的父元素我们称为包含块，包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标偏移和显示范围的参照物；

设置某个元素为包含块：给此元素添加relative，fixed，absolute都可，推荐使用relative，因为不会影响元素在文本流中的显示；

总结元素绝对定位三部曲：

  • 先确定其包含块
  • 设置元素绝对定位
  • 定位的位置

基本使用讲解：

例如：img元素放在div中，没有设置定位效果

代码实现如下：

HTML:

<!DOCTYPE html>
<html lang="en">
   <head> </head>
   <body>
      <div>
        <img src="../img/timg.jpg" alt="" />
      </div>
   </body>
</html>

CSS：

div {
   width: 400px;
   height: 400px;
   border: 10px dashed coral;
   margin: 100px;
}

显示效果如下：

然后给图片设置绝对定位，代码如下：

img {
    position: absolute;
    left: 0;
    top: 0;
}

分析：img的父元素是div，从上述代码中，可以看出div没有定位设置，不能作为img的包含块，一依次向上是body，body也没有定位设置，再向上就是html，所以img会根据html进行定位，定位到离包含块左边0，上边0的位置定位，也就是左上角位置；

效果如下：

如果想让img根据div盒子进行定位，div需要有除static之外的定位设置；成为一个包含块，代码如下：

  div {
    width: 400px;
    height: 400px;
    border: 10px dashed coral;
    margin: 100px;
    /* position:absolute relative fixed都可以让一个元素成为包含块 */
    position: absolute;
 }
 img {
    position: absolute;
    left: 100px;
    top: 100px;
 }

效果如下：

绝对定位对元素在文档流中的影响

给元素设置绝对定位之后，元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样；

例如：在img下面添加了一个p标签，并且没有给img设置绝对定位，此时img和p会根据书写顺序，从上向下依次显示，代码如下：

Html：

<div>
    <img src="../img/timg.jpg" alt="" />
    <p>
        ~~~~~~我是写在img下面的span呀~~~~~~
    </p>
</div>

Css：

* {
    margin: 0;
    padding: 0;
 }
div {
    width: 400px;
    height: 400px;
    border: 10px dashed coral;
    margin: 100px;
 }
p {
    background: lemonchiffon;
 }

效果如下：

当给img设置绝对定位之后，img在正常文档流中所占的空间会关闭，img不在占据原来的空间；p标签就会当img不存在一样，显示在div最开始的位置：

代码如下：

Html：

<div>
    <img src="../img/timg.jpg" alt="" />
    <p>
         ~~~~~~我是写在img下面的span呀~~~~~~
    </p>
</div>

Css：

* {
    margin: 0;
    padding: 0;
 }
 div {
    width: 400px;
    height: 400px;
    border: 10px dashed coral;
    margin: 100px;
    /* position:absolute relative fixed都可以让一个元素成为包含块 */
    position: relative;
 }
 img {
    position: absolute;
    left: 100px;
    top: 100px;
 }
 p {
    background: lemonchiffon;
 }

效果如下：

  • 固定定位 position:fixed

生成固定定位的元素，相对于浏览器窗口进行定位。

基本使用讲解

元素设置固定定位之后，相对窗口进行定位，不会根据浏览器滚动条的滚动而移动位置，代码如下：

结构：内容比较多,让浏览器可以出现滚动条

<body>
	我是让当前浏览器产生滚动条的文本1
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本2
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本3
	<br /><br /><br /><br /><br />
	<img src="../img/timg.jpg" alt="" />
	<br />
	我是让当前浏览器产生滚动条的文本4
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本5
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本6
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本7
	<br /><br /><br /><br /><br />
</body>

效果如下：

给图片添加固定定位；代码如下：

<style>
    img {
    position: fixed;
    right: 0;
    top: 30%;
    }
</style>

效果如下：

固定定位对元素在文档流中的影响

给元素设置固定定位之后，元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样（参照上图看效果）；

sticky 粘性定位

css3中新增的属性值，有兼容问题，ie低版本浏览器不支持

粘性定位，元素在浏览器范围内定位时就像 position:relative; 而当页面滚动超出目标区域时，它的定位效果就像 position:fixed;，它会固定在目标位置。

基本语法讲解

例如：给img元素设置粘性定位，代码如下：

Html结构：

<body>
	我是让当前浏览器产生滚动条的文本1
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本2
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本3
	<br /><br /><br /><br /><br />
	<img src="../img/timg.jpg" alt="" />
	<br />
	我是让当前浏览器产生滚动条的文本4
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本5
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本6
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本7
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本8
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本9
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本10
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本11
	<br /><br /><br /><br /><br />
</body>

css代码：

<style>
   img {
       position: sticky;
       left: 300px;
       top: 100px;
 }
 </style>

效果如下：


元素设置绝对定位、固定定位后，会生成一个块级框，而不论原来它在正常流中生成何种类型的框。

例如： span默认为行内元素，给其设置绝对定位，观察其生成的块级框效果，代码如下：

Html：

<span>我是测试绝对定位对元素类型影响的小可爱</span>

Css：

<style>
 span {
     position: absolute;
     width: 300px;
     height: 300px;
     background: lightblue;
     font-size: 30px;
     border: lightcoral 10px dashed;
 }
 </style>

效果如下：

以上是对position属性语法的基本讲解，其实position在实际开发中，有很多灵活的使用方式，下次我们写一个比较有趣的案例，给大家展示定位在实际项目中的灵活应用。

相关推荐