固定定位相对于当前父元素

我们知道，固定定位是相对于屏幕的。但是，怎么才能实现相对于当前父元素呢？那就是不使用top left bottom right。而是使用margin-top margin-left margin-bottom margin-right

直接上代码，测试一下，你会恍然大悟！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test</title><style>.father{top:100px;position: absolute;display: block;width: 200px;height: 200px;background: red;}.sun{position: fixed;margin-left: 100px;display: block;width: 100px;height: 100px;background:blue;}</style>
</head>
<body><div class="father"><div class="sun"></div></div>
</body>
</html>

快去试试把~

固定定位相对于当前父元素相关推荐

CSS 之 posiiton：fixed 固定定位在父元素含有 tranform 属性时会失效，变成 absolute 的效果
一.简介今天在网上看到了一条言论说:子元素posiiton:fixed 固定定位在父元素含有 tranform 属性时会失效,变成 absolute 的效果.虽然这个场景,我还没有在实际工作中用到过 ...
HTML+CSS---定位（相对定位--绝对定位--固定定位--设置元素的层叠顺序)---表单---设置光标样式---透明度（opacity属性定义元素的不透明度--IE的半透明滤镜）---外边线
文章目录定位静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 设置元素的层叠顺序表单设置光标样式透明度 opacity属性定义元素 ...
【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位
文章目录 1. 为什么需要 2. 定位组成定位 = 定位模式 + 边偏移 2.1 定位模式 2.2边偏移 3. 静态定位 static (了解) 4. 相对定位 relative (重要) 5. 绝 ...
CSS position: fixed 相对于父元素定位
使用 fixed 进行布局的元素,在一般情况下会相对于屏幕视窗来进行定位.但是如果父元素的 transform, perspective 或 filter 属性不为 none 时,position为f ...
一、CSS定位布局[相对定位、绝对定位、固定定位]
一.CSS定位布局选项说明 static 默认形为,属于文档流 relative 相对定位 absolute 绝对定位 fixed 固定定位 1.relative 解释:元素在原来的位置开始移动( ...
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)
static(静态定位),fixed(固定定位),relative(相对定位),absolute(绝对定位) Position的取值: static(静态定位) : 表示块保留在原本应该在的位置,不会 ...
HTML/CSS——子元素相对于父元素固定定位解决方案
基本概念绝对定位(absolute):设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像该元 ...
Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解
前言持续学习总结输出中,今天分享的是Web前端,CSS常用之相对定位和绝对定位的区别,静态定位.子绝父相.固定定位.元素的层级关系的了解 1.定位的基本介绍我们的网页常见布局方式有:标准流.浮动. ...
CSS固定定位[相对浏览器] 相对定位[相对自己] 绝对定位[有relative的元素]
1基础 Fixed:固定定位是相对于浏览器窗口来定位的 Absolution: 绝对定位:当没有父元素或者父元素没有进行定位的时候,就是固定定位,以浏览器为标的物元素会脱离文档流,若该元素没有设置 ...

固定定位相对于当前父元素

固定定位相对于当前父元素相关推荐

最新文章

热门文章