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>

    效果:

  • 相关阅读:
    网页一屏到底有多大 1024*768 800*600 网页设计大小 网页设计尺寸
    去掉VS2005中水晶报表的登录界面(ZT)
    Visual Studio 2005 IDE 技巧和窍门
    asp.net大页面载入时以进度条显示zt
    从webservice读取string[]至downlist,增加onchange事件,更改相关显示。
    在asp.net Sql server (可以是存储过程)中使用事务回滚
    得到页面所有的form内对象数值——————为一个控件加一个客户端属性
    Agile Web Development 4th ed. Can't mass assign.error
    Ubuntu12.04中安装和配置Java JDK(转)
    Javascript没有块级作用域
  • 原文地址:https://www.cnblogs.com/Rinpe/p/5557530.html
Copyright © 2011-2022 走看看