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. Light OJ 1050 - Marbles（概率DP）

    题目大意: 一个包裹里有蓝色和红色的弹珠,在这个包裹里有奇数个弹珠,你先走, 你先从背包里随机的拿走一个弹珠,拿走每个弹珠的可能性是一样的.然后Jim从背包里拿走一个蓝色的弹珠,如果没有蓝色的弹珠让J ...

  2. 1044 - Palindrome Partitioning（区间DP）

    题目大意: 给你一个字符串,问这个字符串最少有多少个回文串. 区间DP直接搞     #include<cstdio> #include<cstring> #include&l ...

  3. Python IDLE 清屏工具

     转载自:http://www.cnblogs.com/maybego/p/3234055.html   1.下载clearwindow.py(右击-目标另存为,直接点击会打开脚本内容). 2.拷贝c ...

  4. js 的 提交

    <script type="text/javascript"> function sub(){ if(document.form1.xingming.value==&q ...

  5. stringstream 与空格 (大家讨论一下代码结果的原因)

    #include <iostream> // std::cout, std::endl #include <iomanip> // std::setw #include < ...

  6. 数据结构与算法分析——C语言描述

    P1.1 选择问题,选择出第K大的数,并画出N为不同值的运行时间,K=N/2 毕业两年半,重写排序,感觉良好.代码使用冒泡排序,库函数clock计算大致运行时间. // P1_1.cpp : Defi ...

  7. JavaScript高级程序设计16.pdf

    第8章 BOM BOM的核心对象就是window,它表示浏览器的一个实例,在浏览器中window对象有双重角色,它既是JavaScript访问浏览器的一个接口,又是规定的Global对象,因此所有在全 ...

  8. Cogs 1070. [焦作一中2012] 玻璃球游戏 带权并查集,逆序处理

    题目: http://cojs.tk/cogs/problem/problem.php?pid=1070 1070. [焦作一中2012] 玻璃球游戏 ★   输入文件:marbles.in   输出 ...

  9. C++Primer第5版学习笔记（四）

    C++Primer第5版学习笔记(四) 第六章的重难点内容         你可以点击这里回顾第四/五章的内容       第六章是和函数有关的知识,函数就是命名了的代码块,可以处理不同的情况,本章内 ...

  10. hdoj 1969 Pie【二分】

    Pie Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...