position fixed 相对于父级定位
<!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 相对于父级定位的更多相关文章
- 利用transform的bug使fixed相对于父级定位
首先,大家都清楚,元素使用fixed之后,若不设置top与left则会相对于最近的使用定位的父元素,并位于父元素的原点位置设置top与left值时,则会相对于窗口定位.但无论如何,此时仍相对于窗口定位 ...
- 如何让position fixed不再基于浏览器窗口定位
position:fixed默认是相对浏览器定位的. 就是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化: MDN对position: fixed有一个注释: 当元素祖先的 trans ...
- fixed 相对于父容器定位
当一个元素设置为 fixed 或 absolute,不设置 top, left 则会在原位置,而脱离文档流,别的元素可以存在于它之后. 而当使用 fixed 后还想相对于父容器进行定位,或者说在当前位 ...
- position:fixed not work？
问题 在position:fixed的使用中,突然发现某个操作之后,fixed定位的位置变了?? bottom:0,left:0.本来应该在最下面,结果跑没影了. wtf?position:fixed ...
- position:fixed相对父级元素定位而不是浏览器
position:fixed默认是相对浏览器定位的 原理:fixed定位相对父级容器定位,不添加:top,bottom,left,right样式,通过margin定位 代码:http://jsbin. ...
- position:fixed 相对父元素定位
position:fixed是对于浏览器窗口定位的,要实现相当于父元素定位,可以这样: 不设置fixed元素的top,bottom,left,right,只设置margin来实现. 这种方法本质上fi ...
- [jQuery]相对父级元素的fixed定位
(function($) { var DNG = {}; //----------------------------------------------------/ // ...
- 深入理解定位父级offsetParent及偏移大小
前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWid ...
- 深入理解定位父级offsetParent及偏移大小offsetTop / offsetLeft / offsetHeight / offsetWidth
深入理解定位父级offsetParent及偏移大小 [转载] 前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.o ...
随机推荐
- The Microsoft Distributed Transaction Coordinator (MS DTC) has cancelled the distributed transaction.
同事反馈一个系统在运行一个存储过程时遇到了下面错误: Msg 1206, Level 18, State 169, Procedure xxxxxx, Line 118The Microsoft Di ...
- Tomcat8-windows不能在本地计算机启动tomcat，有更多的信息，查阅系统事件日志。
tomcat启动不了,也卸载不了. 本人的一个解决方法: 本来jdk和jre是装在g盘的同一个文件夹里的,后来删了他们.再安装的时候jdk安装回原来的地方,jre安装到c盘. 现在需要卸载到他们,重新 ...
- The JSP specification requires that an attribute name is
把另一个博客内容迁移到这里 七月 10, 2016 10:23:12 上午 org.apache.catalina.core.ApplicationDispatcher invoke 严重: Serv ...
- mssql sqlserver 使用脚本输出excel文件的方法分享
转自:http://www.maomao365.com/?p=6683 摘要: 下文将分享使用sql脚本输出excel的方法 此脚本可以应用于 表或视图生成excel的方法,若需使用sql脚本输出ex ...
- java.lang.NumberFormatException: Infinite or NaN
1.异常提示: java.lang.NumberFormatException: Infinite or NaN 2.原因:无法格式化的数字,此数字要么不是个数字,要么是无穷大的数字,从而导致 B ...
- Python操作字典(dict)
一.字典定义 >>> dict={} 二.字典元素添加 >>> dict['性别']='男' >>> dict {'性别': '男'} >& ...
- 设置SSH免密码登录
1.cd .ssh 2.执行下面的命令,三次回车. ssh-keygen -t rsa cat id_rsa.pub >> authorized_keys 3.发送公钥 scp .ssh/ ...
- C语言 文件的读写操作
//凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ #include<stdio.h> #include<stdlib.h> void ...
- CISCO静态路由配置
静态路由:手动添加路由条目到路由表中 优点:没有额外的路由cpu负担,节约带宽,增加网络安全性. 缺点:必须去了解整个拓扑结构,如果网络拓扑发生变化,需要在所有r路由上手动修改路由表. 实验拓扑如下: ...
- Java访问级别修饰符
用途 控制其他类可以访问的字段或方法 修饰符 public.protected.no modifier(未声明).private 访问级别 修饰符 当前类 包 子类 其他包 public √ √ √ ...