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>

效果:

层模型--固定定位(position:fixed)的更多相关文章

  1. 通过定位position="fixed"实现网页内容的固定层效果

    在网页的顶部或者底部导航栏中经常需要使用到固定层的效果,即紧挨浏览器窗口的顶部或底部而网页其他内容的影响. 一.实现 主要通过设置导航栏元素的位置属性position="fixed" ...

  2. position：sticky 定位 position:fixed

    它的表现类似position:relative和position:fixed的合体,当目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像 ...

  3. 固定标签(position: fixed)

    document.body.scrollTop 要改成 document.documentElement.scrollTop不然不生效 <!DOCTYPE html> <html l ...

  4. CSS03--框模型、定位position、浮动

    我们接着“CSS02”,继续学习一些新的样式属性. 1.框模型:   规定了元素框处理  元素内容.内边距(padding).边框(border).外边距(margin,可以是负值)的方式 2.内边距 ...

  5. 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  6. position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  7. 固定定位fixed，绝对定位absolute，相对定位relative；以及overflow

    固定定位position:fixed /*固定定位 1.定位属性值:fixed 2.在页面中不再占位(浮起来了) 3.一旦定位后,定位的布局方位 top.bottom.left.right都能参与布局 ...

  8. CSS层模型

    参考:慕课网 点此可进 如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作.CSS定义了一组定位(positioning)属性来支持层布局模型 ...

  9. css定位position认识

    1.绝对定位(position: absolute) 2.相对定位(position: relative) 3.固定定位(position: fixed) 绝对定位 设置position:absolu ...

随机推荐

  1. 14.5.5 Deadlocks in InnoDB

    14.5.5 Deadlocks in InnoDB 14.5.5.1 An InnoDB Deadlock Example 14.5.5.2 Deadlock Detection and Rollb ...

  2. Android开发详解之onTouch和onClick详解

    android组件中的onTouch,onClick,onLongClick事件发生先后顺序和关联: 一,onTouch返回false 首先是onTouch事件的down事件发生,此时,如果长按,触发 ...

  3. [LeetCode#256] Paint House

    Problem: There are a row of n houses, each house can be painted with one of the three colors: red, b ...

  4. ☀【Zepto】touch events

    https://github.com/madrobby/zepto jTouchhttps://github.com/liutian1937/jTouch iphone.ipod Touch.ipad ...

  5. POJ1664

    Problem  B Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 20000/10000K (Java/Other) Total Su ...

  6. Unity3d 屏幕空间人体皮肤知觉渲染&次表面散射Screen-Space Perceptual Rendering & Subsurface Scattering of Human Skin

    之前的人皮渲染相关 前篇1:unity3d Human skin real time rendering 真实模拟人皮实时渲染 前篇2:unity3d Human skin real time ren ...

  7. C_FORCE_ROOT linux环境变量设置

    nano /etc/profile     gedit 也可以 结尾追加 export C_FORCE_ROOT="true"

  8. MVC 5 第一章 起航

    本章将讲述一些构建ASP.NET  MVC 5 web application的一些基础知识, 通过本章学习,你应该能够掌握到构建MVC 5应用程序的基本步骤,并且通过展示一个完整的MVC 5 hel ...

  9. python之json学习

    1. 从python原始类型向json类型的转换过程,具体的转换如下: import json json.dump(obj, fp, skipkeys=False,ensure_ascii=True, ...

  10. bzoj2132: 圈地计划

    要分成两坨对吧.. 所以显然最小割 但是不兹辞啊.. 最小割是最小的啊 求最大费用怎么玩啊 那咱们就把所有费用都加起来,减掉一个最小的呗 但是两个属于不同集合的点贡献的价值是负的啊 网络流怎么跑负的啊 ...