固定定位position:fixed

		/*固定定位

        1、定位属性值：fixed

        2、在页面中不再占位(浮起来了)

        3、一旦定位后，定位的布局方位 top、bottom、left、right都能参与布局

        4、固定定位的参考系是页面窗口(不是页面中的哪一点，而是四边参照四边)

        5、左右同时存在，取左；同理上下取上

        */




<style>

    body{

        /*min-width设置区域的最小宽度，如果最小宽度超过页面的像素

        那么页面就会有横向滚动条*/

        /*min-width: 2000px;*/

    }

    .fix{

        position: fixed;

        width: 200px;

        height: 300px;

        right: 10px;

        background: #ff5e28;

        text-align: center;/*设置水平居中*/

        line-height: 300px;/*设置垂直居中，因为默认文字显示在行中间*/

        top:calc(50% - 150px);

    }

</style>

<body>

    <div class="fix"><div class="word">这是固定定位</div></div>

</body>

绝对定位

calc（a - b）:的作用是可以在括号内进行像素和百分比的加减

比如：margin：20px calc（50% - 20px）

calc（）内运算符号的两边一定要有空格

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>绝对定位</title>

    <style>

        .sup {

            width: 180px;

            height: 260px;

            background-color: orange;

            margin: 100px auto;

        }

        .sub {

            width: 50px;

            height: 80px;

            background-color: red;

        }

        /*绝对定位：

        1、定位属性值：absolute

        2、在页面中不再占位(浮起来了)，就无法继承父级的宽度(必须自己自定义宽度)

        3、一旦定位后，定位的布局方位 top、bottom、left、right都能参与布局

        4、绝对定位的参考系是最近的定位父级(不是父级中的哪一点，而是四边参照四边)

        5、左右同时存在，取左；同理上下取上

        6、当父级定位了，子级参照父级定位，又可以重新获取父级宽度(也可以在计算中拿到父级高度)

        */

        .sub {

            position: absolute;

            left: calc(50% - 25px);

            right: 0;

            bottom: 0;

            top: calc(50% - 40px);

        }

        /*需求：

        1）父级需要定位 - 辅助自己绝对定位，作为自己绝对定位的参考系

        2）父级定位了，但是不能影响自身原有布局 - 虽然定位，但是不浮起来

        结论：相对定位 => 父相子绝

        */

        .sup {

            /*父级相对定位的目的：1）不影响自身布局 2）辅助自己绝对定位布局*/

            position: relative;

        }

        /*body {*/

            /*width: 1000px;*/

            /*height: 600px;*/

            /*position: fixed;*/

        /*}*/

        /*.sup {*/

            /*position: fixed;*/

        /*}*/

    </style>

</head>

<body>

<div class="sup">

    <div class="sub"></div>

    <h3>hhhhhhhhhhhh</h3>

</div>

</body>

</html>

绝对定位中，如果父级没有绝对或者相对定位，那么继续往上层找，如果都没有则根据body进行定位。

相对定位

相对定位只要作用是给辅助子级的绝对定位提供一个参照物。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>相对定位</title>

    <style>

        .box {

            width: 300px;

            height: 300px;

            background-color: orange;

            margin: 0 auto;

        }

        h1 {

            margin: 0;

        }

        /*相对定位：

        1、定位属性值：relative

        2、在页面中依旧占位，完全保留之前的所有布局

        3、一旦定位后，定位的布局方位 top、bottom、left、right都能参与布局

        4、相对定位的参考系是自身原有位置(当前位置)(不是自身中的哪一点，而是四边参照四边)

        5、左右同时存在，取左；同理上下取上，布局移动后，也不影响自身原有位置(兄弟布局也不会变化)

        作用：辅助于子级的绝对定位布局，一般不用于自身布局

        */

        .box {

            position: relative;

            /*left: -10px;*/

            bottom: 20px;

            top: 400px;

        }

    </style>

</head>

<body>

    <h1>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</h1>

    <div class="box"></div>

    <h1>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</h1>

</body>

</html>

overflow属性

用来处理超出区域的内容如何显示

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>overflow属性</title>

    <style>

        .box {

            width: 200px;

            height: 300px;

            background-color: pink;

        }

        /*

        1）默认子级(内容)超出父级显示区域，不会做任何处理(正常显示)

        2）overflow: hidden; - 隐藏超出的内容

        3）overflow: scroll; - 以滚动方式显示内容(一定会预留滚动条的占位)

        4）overflow: auto; - 有超出内容才以滚动方式显示

        */

        .box {

            overflow: auto;

        }

    </style>

</head>

<body>

    <div class="box">

        哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂

    </div>

</body>

</html>

固定定位fixed，绝对定位absolute，相对定位relative；以及overflow的更多相关文章

  1. Position属性四个值：static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  2. Position属性四个值：static、fixed、absolute和relative的区别

    1.static(静态定位):默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative(相对定位):生成相对 ...

  3. [Web 前端] 019 css 定位之绝对定位与相对定位

    1. 关于定位 我们可以使用 css 的 position 属性来设置元素的定位类型 postion 的设置项如下 设置项 释义 relative 生成相对定位元素元素所占据的文档流的位置不变元素本身 ...

  4. position的absolute与fixed，absolute与relative共同点与不同点

    absolute与fixed 共同点: (1) 改变行内元素的呈现方式,display被置为block: (2) 让元素脱离普通流,不占据空间: (3) 默认会覆盖到非定位元素上 不同点: absol ...

  5. ie6与固定定位fixed,+ 条件注释格式注意

    ie6并不支持position:fixed, ie7+都支持fixed定位, ie6固定定位实现方法1: <!DOCTYPE html> <html> <head> ...

  6. HTML静态网页的格式与布局（position：（fixed、absolute、relative）、分层、float（left、right））

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute 1.外层没有position:absolute(或r ...

  7. 固定定位fixed（IE6）

     position: fixed;          left:200px;          top:100px;          _left:200px;          _top:100px ...

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

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

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

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

随机推荐

  1. eclipse 上Svn将项目从分支合并到主干的方法

    eclipse svn 分支合并到主干   最近公司产品上线,整个系统架构包含有七八个子系统,并且子系统都是集群部署.所以每次升级维护都要确保尽可能不出问题.因为整个系统刚上线不久,意味着新系统不定期 ...

  2. JUC 一 FutureTask

    java.util.concurrent public class FutureTask<V> implements RunnableFuture<V> 简介 FutureTa ...

  3. NX二次开发-UFUN高亮显示对象UF_DISP_set_highlight

    NX11+VS2013 #include <uf.h> #include <uf_modl.h> #include <uf_disp.h> UF_initializ ...

  4. NX二次开发-UFUN设置工程图PNG图片长度UF_DRF_set_image_width

    #include <uf.h> #include <uf_drf.h> UF_initialize(); //插入PNG char* file_name = "D:\ ...

  5. string的find("")

    ); string strleft; int FindMin = TempRangeData1.find(("_")); ) { strleft = (TempRangeData1 ...

  6. Core Location Framework学习

    在Apple开发中,尤其是移动设备开发,经常会使用Core Location Framework,这个框架可以使得iOS设备获取当前的地理位置.本文就具体到Core Location 框架中,查看其声 ...

  7. faster-rcnn代码阅读-roi-data层

    这一节讲述roi-data层,和这一层有关的结构图如下: roi-data层的prototxt定义如下: layer { name: 'roi-data' type: 'Python' bottom: ...

  8. LeetCode 704. Binary Search (二分查找)

    题目标签:Binary Search 很标准的一个二分查找,具体看code. Java Solution: Runtime:  0 ms, faster than 100 % Memory Usage ...

  9. Soldier and Number Game-素数筛

    Two soldiers are playing a game. At the beginning first of them chooses a positive integer n and giv ...

  10. nginx之tcp负载代理

    大多数人针对nginx的负载均衡代理都是停留在HTTP代理那一块,我也一样:然而最近遇到了一个小问题,下面简单的叙述一下: 1.开发那边使用java代码进行ssh连接Linux服务器,然后执行bash ...