position:fixed相对父级元素定位而不是浏览器

position:fixed默认是相对浏览器定位的

原理:fixed定位相对父级容器定位,不添加:top,bottom,left,right样式,通过margin定位

代码:http://jsbin.com/tegodideyi/edit?html,css,output

HTML布局:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="father">
    <div class="son">
      fixed定位相对父级容器定位,不添加:top,bottom,left,right样式,通过margin定位
    </div>
  </div>

  <p>a</p>
  <p>b</p>
  <p>c</p>
  <p>d</p>
  <p>e</p>
  <p>f</p>
  <p>g</p>
  <p>h</p>
  <p>i</p>
  <p>j</p>
  <p>k</p>
  <p>l</p>
  <p>m</p>
  <p>n</p>
  <p>o</p>
  <p>p</p>

</body>
</html>

CSS样式:

.father {
  width:300px;
  height:300px;
  background:green;
}

.son {
  position:fixed;
  margin-top: 40px;
  width:150px;
  height:150px;
  background:red;
  word-break: break-all;
}

结果:

未滚动时:

滚动后:

时间: 2024-10-25 09:51:43

position:fixed相对父级元素定位而不是浏览器的相关文章

layer弹出层设置相对父级元素定位

layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加载 fixed: false, //取消固定定位,因为固定定位是相对body的 offset: ['60px', '132px'], //相对定位 time: 5000, //定时关闭弹层 icon: 2, //加载的icon类型 shade: 'background-color: rgba(0,0

html css样式子元素相对父级元素定位

废话不多说. 父级元素 样式设置: position:relative; 子元素样式: position: absolute; 这样就可以达到子元素相对父级元素定位了. 原文地址:https://www.cnblogs.com/bubbletg/p/10225288.html

[ jquery 过滤器 offsetParent() ] 此方法用于在选择器的基础之上搜索被选元素有定位的父级元素,仅对可见元素有效

此方法用于在选择器的基础之上搜索被选元素有定位的父级元素,仅对可见元素有效: 返回第一个匹配元素用于定位的父节点,这返回父元素中第一个其position设为relative或者absolute的元素,此方法仅对可见元素有效 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my pa

关于多子级元素充满父级元素高度的布局方式

关于多子级元素充满父级元素高度的布局方式,听着有些绕口,上个图应该就能很清楚的理解这标题的意思了: 如图:左右分栏的情况下,有顶部和底部导航,且在屏幕高度不定的时候(移动端,多设备适配),如何不适用js来让内容区自适应扩展,填满父级剩下的高度呢? 首先分两种情况: 一.顶部和底部导航为固定高度时,这种情况挺常见的,也是相对比较简单的一种情况: 方法1:使用box-sizing: border-box; 配合 height: 100%; 和上下padding来达到全屏侧边的效果: <!DOCTYP

jQuery使用(四):DOM操作之查找兄弟元素和父级元素

查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings()  1.1.1.next()方法用来查找下一个兄弟元素,可以传参也可以不传参.参数可以是任意jQuery选择器,表示如果下一个元素如果是指定的元素就选定.当没有选中指定的元素时,jQuery链式调用还是保持原来的jQuery对象. <!-- next --> <button>点我&

CSS 父级元素高度为 0 解决方案

CSS 中父级元素的高度一般由子元素撑开,不会特意设置高度,但是以下情况会造成父级元素高度坍塌,也就是高度为零,影响后面元素的排版. 子元素使用绝对定位 子元素浮动 针对第一种情况,即子元素使用绝对定位,可以使用以下方案: 子元素的绝对定位改为相对定位,如果可以改的话 针对第二种情况,即由子元素浮动造成父元素坍塌,可以使用以下方案: /*父级元素绝对定位*/ position: absolute /*父级元素添加*/ overflow: hidden; /*伪元素清除浮动造成的影响*/ .cle

jquery选择器如何获取父级元素、同级元素、子元素

一.新建页面 1 <ul> 2 <li>list item 1</li> 3 <li>list item 2</li> 4 <li class="third-item">list item 3</li> 5 <li>list item 4</li> 6 <li>list item 5</li> 7 </ul> 8 9 <p>Hell

CSS清除浮动使父级元素展开的三个方法

点评:一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开,下面举个例子为大家详细介绍下,希望对大家有所帮助 一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开. 举个例子,有一个div容器,div容器里有两个小容器,分别向左和向右浮动,为了区别这三个容器,分别设置了不同颜色的边框. 复制代码 代码如下: <html> <h

转:iframe加载的子页面里面获取父级元素窗口以及元素的高度

iframe里的js要操作父级窗口的dom,必须搞懂几个对象: parent是父窗口(如果窗口是顶级窗口,那么parent==self==top) top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe) self是当前窗口(等价window) 父级页面:index.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>父窗口<