<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        body{

            width: 100%;

        }

        /* 版心 */

        .container{

            width: 1200px;

            height: 2000px;

            background-color: rgb(172, 167, 167);

            margin:0 auto;

            text-align: center;

        }

        .content{

            margin:0 auto;

            width: 900px;

            height: 1700px;

            background-color: gold;

        }

        .left_btn{

            position: fixed;

            top:50%;

            width: 50px;

            height: 200px;

            line-height: 200px;

            /* 使用margin 不用 left， 相对于父级版心定位*/

            margin-left: 50px;

            /* left:50px; */

            background-color: red;

        }

        .right_btn{

            position: fixed;

            top:50%;

            width: 50px;

            height: 200px;

            line-height: 200px;

            /* 使用margin 不用 right， 相对于父级版心定位*/

            margin-left: 1100px;

            /* right: 50px; */

            background-color: red;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="content">内容</div>

        <div class="left_btn">a</div>

        <div class="right_btn">b</div>

    </div>

</body>

</html>

position fixed 左右使用margin 可相对于父级定位

position fixed 相对于父级定位的更多相关文章

  1. 利用transform的bug使fixed相对于父级定位

    首先,大家都清楚,元素使用fixed之后,若不设置top与left则会相对于最近的使用定位的父元素,并位于父元素的原点位置设置top与left值时,则会相对于窗口定位.但无论如何,此时仍相对于窗口定位 ...

  2. 如何让position fixed不再基于浏览器窗口定位

    position:fixed默认是相对浏览器定位的. 就是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化: MDN对position: fixed有一个注释: 当元素祖先的 trans ...

  3. fixed 相对于父容器定位

    当一个元素设置为 fixed 或 absolute,不设置 top, left 则会在原位置,而脱离文档流,别的元素可以存在于它之后. 而当使用 fixed 后还想相对于父容器进行定位,或者说在当前位 ...

  4. position:fixed not work？

    问题 在position:fixed的使用中,突然发现某个操作之后,fixed定位的位置变了?? bottom:0,left:0.本来应该在最下面,结果跑没影了. wtf?position:fixed ...

  5. position:fixed相对父级元素定位而不是浏览器

    position:fixed默认是相对浏览器定位的 原理:fixed定位相对父级容器定位,不添加:top,bottom,left,right样式,通过margin定位 代码:http://jsbin. ...

  6. position:fixed 相对父元素定位

    position:fixed是对于浏览器窗口定位的,要实现相当于父元素定位,可以这样: 不设置fixed元素的top,bottom,left,right,只设置margin来实现. 这种方法本质上fi ...

  7. [jQuery]相对父级元素的fixed定位

    (function($) {     var DNG = {};     //----------------------------------------------------/     // ...

  8. 深入理解定位父级offsetParent及偏移大小

    前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWid ...

  9. 深入理解定位父级offsetParent及偏移大小offsetTop / offsetLeft / offsetHeight / offsetWidth

    深入理解定位父级offsetParent及偏移大小 [转载] 前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.o ...

随机推荐

  1. Hibernate设置事务的隔离级别

    方式有两种: 1)修改配置文件hibernate.cfg.xml实现 <hibernate-configuration> <session-factory> ...... &l ...

  2. java----堆区、方法区和栈区

    堆区:只存放类对象,线程共享: 方法区:又叫静态存储区,存放class文件和静态数据,线程共享; 栈区:存放方法局部变量,基本类型变量区.执行环境上下文.操作指令区,线程不共享; class A { ...

  3. django数据查询之聚合查询和分组查询

    <1> aggregate(*args,**kwargs): 通过对QuerySet进行计算,返回一个聚合值的字典.aggregate()中每一个参数都指定一个包含在字典中的返回值.即在查 ...

  4. 快速启动神器 Wox

    wox(快速启动程序) wox官网:http://www.wox.one/ 下载wox:https://github.com/Wox-launcher/Wox/releases wox插件库:http ...

  5. Turtle绘制带颜色和字体的图形（Python3）

    转载自https://blog.csdn.net/wumenglu1018/article/details/78184930 在Python中有很多编写图形程序的方法,一个简单的启动图形化程序设计的方 ...

  6. 【文学文娱】《屌丝逆袭》-出任CEO、迎娶白富美、走上人生巅峰

    本文地址:http://www.cnblogs.com/aiweixiao/p/7759790.html 原文地址:(微信公众号) 原创 2017-10-30 微信号wozhuzaisi 程序员的文娱 ...

  7. 【teradata】强制解锁

    使用加锁用户释放锁,也可以用其它用户使用如下语句强制解锁 Release lock (pdm_data ),Override

  8. 为什么zookeeper集群中节点配置个数是奇数个？

    Zookeeper的大部分操作都是通过选举产生的.比如,标记一个写是否成功是要在超过一半节点发送写请求成功时才认为有效.同样,Zookeeper选择领导者节点也是在超过一半节点同意时才有效.最后,Zo ...

  9. SpringBoot2.0 最简单的 idea 快速创建项目

    第一步 第二步 第三步 以上就是idea快速创建springboot的方法,创建之后等maven 依赖下载完成,就可以使用

  10. C# 生成和解析二维码

    下面是C#和JAVA两个版本的开放源码下载: C#:http://www.codeproject.com/Articles/20574/Open-Source-QRCode-Library JAVA: ...