css固定定位

作者: 邵毅超 | 来源:发表于2018-11-22 14:51 被阅读1次

固定定位:fixed

在实际的使用中,给对应的div设置一个“position:fixed”,接下来根据自身需求设置距离上下左右的一个位置。固定定位是不受所在父级元素的约束的。

下面是一个固定定位实例,固定在右侧的一个菜单:

image.png
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>固定定位</title>
   <style type="text/css">
       *{
           margin:0;
           padding:0;
       }
       .box1{
           width: 1000px;
           height: 3000px;
           background-color: #f1f1f1;
           margin:0 auto;
       }
       .box{
           width: 100px;
           height: 400px;
           background-color: orange;
           border-style: solid;
           border-radius: 10px;
           border-color: pink;
           position: fixed;
           right: 0px;
           top: 200px;
       }
       a{
           font-size: 20px;
           font-family: '幼圆';
           font-weight: bold;
           color: white;
           text-decoration: none;
           line-height: 100px;
       }
       a:hover{
           font-size: 22px;
       }
       li{
           list-style:none;
           text-align: center;
       }
   </style>
</head>
<body>
   <div class="box1">
   <div class="box">
       <ol>
           <li><a href="#">全方位</a></li>
           <li><a href="#">单精度</a></li>
           <li><a href="#">群搜</a></li>
           <li><a href="#">围栏</a></li>
       </ol>
   </div>

   <div id="aox">
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
       <p>我是邵毅超,来自北京</p>
   </div>

   </div>
</body>
</html>

相关文章

  • CSS相对定位(position)

    CSS定位方式有:相对定位(relative)、绝对定位(absolute)和固定定位(fixed) positi...

  • HTML+CSS:css定位详解之相对定位、绝对定位和固定定位

    HTML+CSS:css定位详解之相对定位、绝对定位和固定定位 大鹏学前端 发布时间:18-12-1820:36 ...

  • position:fixed会一直依据窗口进行定位吗

    在刚开始学习CSS的时候,我们都知道固定定位: 固定定位(position:fixed;)其实是绝对定位定位的子类...

  • CSS定位

    CSS定位 定位有三种,分别是相对定位(relative)、绝对定位(absolute)、固定定位(fixed)。...

  • 【第64天】浮动,定位

    1 浮动的副作用 html代码 css代码 2绝对定位,相对定位,固定定位 html css 3 利用z-inde...

  • CSS 固定定位

    CSS固定定位:fixed 特点:1、元素定位是参考于浏览器的可视区域2、定位的元素可以理解为完全脱离文档流3、元...

  • css固定定位

    固定定位:fixed 在实际的使用中,给对应的div设置一个“position:fixed”,接下来根据自身需求设...

  • 实现吸顶效果

    纯CSS实现吸顶效果 粘性定位,是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位著作权归...

  • CSS2.1

    CSS CSS2.1 固定定位的扩展理解 经典布局 BFC Box Formatting Context Bloc...

  • css新增属性position:sticky

    position:sticky是css定位新增属性;可以说是相对定位relative和固定定位fixed的结合;它...

网友评论

    本文标题:css固定定位

    本文链接:https://www.haomeiwen.com/subject/wvelqqtx.html