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 ...
随机推荐
- POST 400 的一次遭遇
使用Springboot开发接口的过程中,使用POST接收提交的数据. @PostMapping("/input") public void inputData(@RequestB ...
- Spring（mvc）思维导图
spring mvc简介与运行原理 Spring的模型-视图-控制器(MVC)框架是围绕一个DispatcherServlet来设计的,这个Servlet会把请求分发给各个处理器,并支持可配置的处理器 ...
- jar、war、ear
附加jboss里面的application.xml <?xml version=”1.0″ encoding=”UTF-8″?> <application xmlns="h ...
- [20190213]学习bbed-恢复删除的数据.txt
[20190213]学习bbed-恢复删除的数据.txt --//以前也做过类似测试,当时在用bbed做verify时错误都不处理,当时的想法就是能读出就ok了.--//而且当时也做成功,纯粹是依葫芦 ...
- [20180927]ora-01426.txt
[20180927]ora-01426.txt --//链接:http://www.itpub.net/thread-2105458-1-1.html1.环境:SCOTT@test01p> @ ...
- 自动化测试基础篇--Selenium简单的163邮箱登录实例
摘自https://www.cnblogs.com/sanzangTst/p/7472556.html 前面几篇内容一直讲解Selenium Python的基本使用方法.学习了什么是selenium: ...
- iis 6，7 ftp 进行用户隔离进行权限控制，不同用户查看不同文件夹
iis 6 配置点击链接 http://www.jb51.net/article/20676.htm iis 7配置 1.建立文件夹 C:\ftp, 并增加 目录 localuser(这个是必须的名字 ...
- Linux 小知识翻译 - 「LDAP」
这次聊聊「LDAP」. LDAP是「Lightweight Directory Access Protocol」的所有,从名字上可以看出是协议的一种. LDAP是访问数据库(层次型数据库)的组件.管理 ...
- 类中的 this关键字
this可用于区分局部变量和成员变量,因为构造函数中如果使用 this.成员变量 = 参数值, 那么可以在new对象时,将初始化值赋值给成员变量,否则成员变量赋值失败, 所以this可以区分成员变量和 ...
- 【Linux基础】VI命令模式下删除拷贝与粘贴
在VI命令模式下:y 表示拷贝, d 表示删除,p标识粘贴 1.删除 dw 表示删除从当前光标到光标所在单词结尾的内容. d0 表示删除从当前光标到光标所在行首的内容. d$ 表示删除从当前光标到光标 ...