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 ...
随机推荐
- c# .Net随机生成字符串代码
/// <summary> /// 随机生成字符串 /// </summary> /// <param name="OperationType"> ...
- c#数据批量插入
由于之前面试中经常被问到有关EF的数据批量插入问题,今天以Sqlserver数据库为例,对.net中处理数据批量处理的方案进行了测试对比. 1.四种测试方案 (1)普通的EF数据批量插入:即调用DbS ...
- 转：Log Explorer使用说明恢复被误删除的数据
一.介绍 Log Explorer主要用于对MSSQLServer的事物分析和数据恢复.你可以浏览日志.导出数据.恢复被修改或者删除的数据(包括执行过update,delete,drop和trunca ...
- c/c++ 标准容器 forward_list resize 操作
c/c++ 标准容器 forward_list, resize, 重新定位迭代器 1,forward_list特有的方法: insert_after emplace_after erase_after ...
- Linux中keepalived+LVS负载均衡的搭建测试
1.1 LVS简介 LVS(Linux Virtual Server),也就是Linux虚拟服务器, 是一个自由软件项目.使用LVS技术要达到的目标是:通过LVS提供的负载均衡技术和Lin ...
- Java教程01-基础语法
目录 1. 基本概念 1.1. 环境变量 Path环境变量的作用->寻找命令 classpath变量的作用->寻找类文件 1.2. JDK里面有什么? 1.3. 什么是JRE? 2. Ja ...
- Socket实例
一.socket处理单个连接 recv方法不是可以随便接收多大的数据都可以.官方建议是8KB, 即conn.recv(8192) import socket client = socket.sock ...
- linux命令应用之一
某个目录下有两个文件a.txt和b.txt.文件格式为(ip username),例如: a.txt 127.0.0.1 zhangsan127.0.0.1 wangxiao127.0.0.2 lis ...
- 获取Spring容器Bean对象工具类
在开发中,总是能碰到用注解注入不了Spring容器里面bean对象的问题.为了解决这个问题,我们需要一个工具类来直接获取Spring容器中的bean.因此就写了这个工具类,在此记录一下,方便后续查阅. ...
- Tmux的快捷键
Ctrl+b 激活控制台:此时以下按键生效 系统操作 ? 列出所有快捷键:按q返回 d 脱离当前会话:这样可以暂时返回Shell界面,输入tmux attach能够重新进入之前的会话 D 选择要脱离的 ...