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 ...
随机推荐
- 第二章 基础查询 2-1 SQL语句基础
一.列的查询 基本的SELECT语句: SELECT <列名 >,...... FROM < 表名>; 注:子句是SQL的组成要素. 注:查询结果中的列的顺序和SELECT子句 ...
- 二、tableau常用难点操作
常用操作: 1.Ctrl+要选的多个字段+“智能显示”选择相应的图形 2.ctrl+m:新建工作表 3.添加行和列时,注意分层结构的利用 3.行的标题颜色的修改: (1)单行:表-右击-阴影-选择相应 ...
- irc 关键操作
IRC 客户端: Textual 5 HexChat IRC 用户密码常用命令: 用户密码: 忘记密码 如果太长时间没登录IRC,难免会忘记密码,那IRC有重置密码的功能吗?当然有,不过也是通过命令 ...
- C# -- 正则表达式匹配字符之含义
C#正则表达式匹配字符之含义 1.正则表达式的作用:用来描述字符串的特征. 2.各个匹配字符的含义: . :表示除\n以外的单个字符 [ ] :表示在字符数组[]中罗列出来的字符任意取单个 | ...
- June 2. 2018 Week 22nd Saturday
Try not to become a man of success but rather try to become a man of value. 不要为成功而努力,要为做一个有价值的人而努力. ...
- May 26. 2018 Week 21st Saturday
Do what you say, say what you do. 做你说过的,说你能做的. Be honest to yourself, and be honest to those people ...
- March 10th, 2018 Week 10th Saturday
All good things must come to an end. 好景无常. Love is when the other person's happiness is more importa ...
- Linux for python教程02
目录 1. Linux用户及权限管理 1.1. who 1.2. 查看当前用户: whoami 1.3. 添加用户账号: useradd 1.4 切换用户 su 2.用户组 3. 修改文件权限: ch ...
- Servlet工作原理解析（tomcat7、嵌入式服务器）
目录 Servlet 容器Tomcat Servlet 容器的启动过程 Web 应用的初始化工作 Servlet 体系结构 创建 Servlet 对象(如何被加载) 初始化 Servlet(如何被 ...
- C#事件の.net下的EventArgs和EventHandler
事件参数(EventArgs) .Net框架里边提供的一个委托EventHandler来Handle事件. 一样,搞一个场景(这个场景是书里的):买车.经销商(CarDealer)会上新车(NewCa ...