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 ...
随机推荐
- mysql服务自启【Linux】
1.复制启动脚本到资源目录 2.增加mysqld服务控制脚本执行权限 3.mysql服务添加到系统服务 4.检测mysqld服务是否生效 表明服务已经启动,以后可以使用service命令启动mysql ...
- 非常全面的SQL Server巡检脚本来自sqlskills团队的Glenn Berry
非常全面的SQL Server巡检脚本来自sqlskills团队的Glenn Berry Glenn Berry 曾承诺对这个脚本持续更新 -- SQL Server 2012 Diagnostic ...
- C#面向对象 类的封装
class student { public int _code; public int Code//属性 { //获取值 get { ; } //设置值 set { _code = value + ...
- 洗礼灵魂，修炼python（63）--爬虫篇—re模块/正则表达式（1）
爬虫篇前面的某一章了,我们要爬取网站页面源代码的数据,要从中获取到我们想要的数据,是不是感觉很费力,确实费力对吧?那么有没有什么有利的工具来解决这个问题呢?那就是这一篇博文的主题—— 正则表达式简介 ...
- CORS(跨域资源共享)详解及与JSONP的对比
上篇讲解的JSONP的跨域请求方式,但是在浏览器的支持及请求方式上有局限性,接下来将介绍一种新的跨域请求方式CORS. CORS是一个W3C标准,全称是"跨域资源共享"(Cross ...
- JavaScript 概述
什么是JavaScriptJavaScript 是一种具有面向对象能力的.解释型的程序设计语言. 它是基于对象和事件驱动并具有相对安全性的客户端脚本语言. 主要目的是,验证发往服务器端的数据.增加 W ...
- oracle 多版本
并发控制 concurrency control 数据库提供的函数集合,允许多个人同时访问和修改数据. 锁(lock)是Oracle管理共享数据库资源并发访问并防止并发数据库事务之间“相互干涉”的核心 ...
- Leetcode：234 回文链表
leetcode:234 回文链表 关键点:请判断一个链表是否为回文链表.示例 1:输入: 1->2输出: false示例 2:输入: 1->2->2->1输出: true. ...
- 【转】Xposed出现 java.lang.IllegalAccessError: Class ref in pre-verified class resolved to unexpected implementation
Xposed出现 java.lang.IllegalAccessError: Class ref in pre-verified class resolved to unexpected implem ...
- 计划任务执行bat
@echo offtaskkill /f /t /im ControlKJmen.exetaskkill /f /t /im KJMen.exetaskkill /f /t /im DisplayLo ...