zoukankan      html  css  js  c++  java
  • 层模型--固定定位(position:fixed)

    fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。

    由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,

    因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。

    以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>relative样式</title>
    <style type="text/css">
    #div1 {
        width:200px;
        height:200px;
        border:2px red solid;
        position:fixed;
        left:100px;
        top:50px;
    }
    </style>
    </head>
    <body>
        <div id="div1"></div>
        <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
        <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
        <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
        <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
        <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
        <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
        <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>

    效果:

  • 相关阅读:
    Linux操作系统基本操作(1)
    C#: 获取当前路径不要用Environment.CurrentDirectory
    Python:Selenium Chrome无弹窗+property/attribute/text
    Python:Selenium+Webdriver安装
    Redis开启远程登录连接
    Redis Error:/var/redis/run/redis_6379.pid exists, process is already running or crashed
    Oracle VM VirtualBox虚拟机内Linux系统硬盘扩容步骤(CentOS6.5)
    PHP开发中Redis安装(CentOS6.5)
    MySQL创建用户与授权(CentOS6.5)
    CentOS下二进制包/源码安装方式的MySQL卸载步骤
  • 原文地址:https://www.cnblogs.com/Rinpe/p/5557530.html
Copyright © 2011-2022 走看看