display属性_CSS position属性

最新推荐文章于 2023-10-18 15:49:39 发布

weixin_39957461

最新推荐文章于 2023-10-18 15:49:39 发布

阅读量138

点赞数

文章标签： display属性 list<record>根据某个属性去重

介绍 CSS position 属性:

CSS position属性用于指定一个元素在文档中的定位方式。 top， right， bottom和 left属性则决定了该元素的最终位置。

分别有五个属性: static, relative, absolute, fixed, sticky

static

这个是默认值, 也就是默认 position 不写的话就是 static 的属性值, 在文档流中

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Position</title>
</head>
  <style>
    span{
      display: inline-block;
      width: 100px;
      height: 100px;
    }
    .other{
      background: red;
    }
    .pos{
      position: static;
      background: blue;
    }
  </style>
<body>
<span class="other"></span>
<span class="pos"></span>
<span class="other"></span>
<span class="other"></span>
</body>
</html>

static 加不加都一样

relative

这个属性是相对定位, 先看例子

/* 只是改变了一些属性, 其他代码沿用上面的*/
.pos{
      position: relative;
      top: 10px;
      left: 20px;
      background: blue;
 }

我们为蓝色盒子设定 relative 后, 然后再给他一个 top 和 left 属性, 他就会相对自己的位置去移动, 而且自身所占的空间不会被挤掉

absolute

absolute 属性脱离文本流, 常与 relative 结合使用, 实现一些垂直居中, 定位技巧, 三栏布局等样式

注意: absolute 根据父级元素是否有除了 position: static 属性来判断依据哪个元素定位

看例子:

 .pos{
      position: absolute;
      top: 10px;
      left: 20px;
      background: blue;
  }

可以出用了 absolute 的属性并指定位置的时候, 它是脱离文本流的, 而且不占空间, 因为他的父元素中只有 body, 所以是相对 body 定位的

改一下例子:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Position</title>
</head>
  <style>
    div{
      position: relative;
    }
    span{
      display: inline-block;
      width: 100px;
      height: 100px;
    }
    .other{
      background: red;
    }
    .pos{
      position: absolute;
      top: 10px;
      left: 20px;
      background: blue;
    }
  </style>
<body>
  <div>
    <span class="other"></span>
    <span class="pos"></span>
    <span class="other"></span>
    <span class="other"></span>
  </div>
</body>
</html>

在外边加一个非 static 属性的元素, 就会根据父级元素定位了, 这里我加的是 relative, 因为这种配合最常用, 为什么呢 ?

下面介绍了 fixed 和 sticky 后说原因

fixed

fixed 这个属性是依据浏览器窗口来实现的定位, 它的常用场景就是一些浮窗广告, 或者如果文章太长的话会出现回到顶部箭头, 还有很多商城网站上做的一个侧栏等等

做个小广告的例子:

.pos{
      position: fixed;
      top: 60px;
      left: 5px;
      background: blue;
 }

我加了一些文字让页面可以滚动, 这个加文字的实现很简单, 我就不贴代码了, 可见在滚动到下面的时候 fixed 的位置不会变化, 一直在浏览器窗口的固定位置, 当你在夜深人静的时候打开某个网站就会经常出现这种小广告, 而且他的关闭按钮很小, 不小心就点击到其他链接了, 很扰兴致啊是不是(滑稽微笑)

sticky

这个属性有很多人还不知道, 但是这个属性确是一个可以实现很酷效果的属性

它有点像 relative 和 fixed 的结合体, 也就是说它不脱离文档流, 占用位置空间, 但是在页面滚动到一定位置是, 它又会和 fixed 一样去粘到浏览器窗口上, 当然它是被父元素限制的

来个栗子:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Position</title>
</head>
  <style>
    p{
      margin: 0;
      padding: 0;
    }
    div{
      height: 300px;
      overflow: auto;
    }
    span{
      display: inline-block;
      width: 100px;
      height: 100px;
    }
    .other{
      background: red;
    }
    .pos{
      position: sticky;
      top: 0px;
      left: 0px;
      background: blue;
    }
  </style>
<body>
  <div>
    <span class="other"></span>
    <span class="pos"></span>
    <span class="other"></span>
    <span class="other"></span>
    <p>我是内容</p>    
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
  </div>
</body>
</html>

没有滚动过去: 占位置,看不出任何变化

滚动过去: 也占位置, 但是会粘在浏览器窗口上

根据这个属性可以做一些常见的固定导航等特别好看的样式

为什么 relative 和 absolute 属性最常搭配

很简单, fixed, absolute 会脱离文档流, skity 看起来没有脱离但是当触发一些条件的时候, 它会黏在窗口上, 而 relative 是副作用最小的一个属性, 所以得出结论

想了解更多? mdn

weixin_39957461

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
display属性_CSS position属性

介绍 CSS position 属性:CSSposition属性用于指定一个元素在文档中的定位方式。top，right，bottom和 left属性则决定了该元素的最终位置。分别有五个属性: static, relative, absolute, fixed, stickystatic这个是默认值, 也就是默认 position 不写的话就是 static 的属性值, 在文档流中<!DOCT...
复制链接

扫一扫