1基础

Fixed：固定定位 是相对于浏览器窗口来定位的
Absolution：
绝对定位：当没有父元素或者父元素没有进行定位的时候，就是固定定位，以浏览器为标的物
元素会脱离文档流，若该元素没有设置宽度，则宽度由元素里面的内容决定，
Relative：
不脱离文档流 定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度

2例子

3绝对定位给第二个div设置absolute 没有父元素的

.div2{height:100px;background-color: blueviolet;position:absolute;top:50px;left:50px;
}第二个div设置了absolute,则该div的宽度就由文本决定，且下面的div会上移占据之前第二个div的位置，top
和left是相对于离它最近且不是static定位的父元素来定位的，在此div2因为没有父元素，所以第二个div相
对于根元素即html元素来定位。

4子绝父相子绝兄弟相给第二个div添加一个父div

<div class="div1">第一个div</div>         <div class="container1">第二个div的父div<div class="div2">第二个div</div>    </div>
</div>.container1
{position:relative;height:200px;background-color: greenyellow;
}
.div2
{height:100px;background-color: blueviolet;position:absolute;top:50px;left:50px;
}div2的父div设置为relative，下面的div3,div4会上移，div2也设置为absolute，
div2就会相对于父div来定位。

4相对定位将第二个div设置为relative

.div2{height:100px;background-color: blueviolet;         position:relative;left:50px;top:50px;
}设置relative的div不会影响其他div的位置，且top和left是相对于它原本自身的位置来定位。

6子相父相

.div2{height:100px;background-color: blueviolet;position:relative;top:50px;left:50px;
}

两个图的第二个div的宽度不同，在没有给div设置宽度的情况下，
第一个是设为absolute，所以宽度为文本宽度，第二个是relative，所以宽度与父元素宽度相同。

若将第二个div的宽度设为500px，得到效果如下：
父亲absolute定位的子元素宽度不会影响父元素的宽，而relative定位的子元素会撑大父元素。

CSS固定定位[相对浏览器] 相对定位[相对自己] 绝对定位[有relative的元素]相关推荐

css固定定位与绝对定位的区别
绝对定位中当一个DIV块的位置被定义为绝对定位的时候,也就失去了文档流即失去原本的位置,并且以父级为基准(父级元素必须是相对定位如果不是则一直往上找,直到找到body为止)来进行偏移, 固定定位其实和 ...
跨浏览器的CSS固定定位{position:fixed}
不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{p ...
CSS——固定定位和Z-index值
固定定位就是相对浏览器窗口定位,绝对定位的一种特殊形式.它以浏览器窗口作为参照物来定义网页元素,当position属性取值为fixed时,即为固定定位. 当对元素设置固定定位后,它将脱离标准文档流的 ...
CSS固定定位与粘性定位4大企业级案例
前面两篇文章为大家详细讲解了相对定位与绝对定位的应用场景和案例.如果想了解的可以在公众号里面查看去看.本小节我们学习下固定定位与粘性定位的应用场景和案例. 属性值描述 relative 相对定位相 ...
css固定定位在某个元素的右边
如何将2号盒子固定定位在1号盒子右边,1号盒子在浏览器中居中显示. 第一种: css水平布局满足等式 left + margin-left+padding-left+width+padding-rig ...
定位的坐标原点HTML,css固定定位_CSS绝对定位固定定位详解
摘要腾兴网为您分享:CSS绝对定位固定定位详解,智学网,鱼乐贝贝,优酷,瑞易生活等软件知识,以及安卓微信多开,特效视频,微贷网app,勿忘我3dm,有为学堂,火力牛,手机知网,移动小秘书,快学堂,p ...
html固定定位原理,css固定定位
定位的四种模式:static,relative,absolute,fixed 定位的四个位置:left,right,top,bottom 定位属性:position,有四种状态值 1.static:静 ...
CSS 固定定位 position fixed
简单描述:固定定位是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化: 注意:固定定位的位置是相对当前浏览器窗口的: 代码示例: 1.我们先在页面中输出一个标准情况下的 div ...
解决固定定位position: fixed；变成了绝对定位随屏幕滚动的问题
在一次vue项目开发中发现按钮设置成固定定位后,依旧随屏幕滚动,变成了相对定位的效果. 查阅资料后发现: 父级元素设置有效的transform属性会导致子元素固定变成绝对元素, 此时会导致子元素和父级 ...

CSS固定定位[相对浏览器] 相对定位[相对自己] 绝对定位[有relative的元素]

1基础

2例子

3绝对定位给第二个div设置absolute 没有父元素的

4子绝父相子绝兄弟相给第二个div添加一个父div

4相对定位将第二个div设置为relative

6子相父相

CSS固定定位[相对浏览器] 相对定位[相对自己] 绝对定位[有relative的元素]相关推荐

最新文章

热门文章

CSS固定定位[相对浏览器] 相对定位[相对自己] 绝对定位[有relative的元素]

1基础

2例子

3绝对定位 给第二个div设置absolute 没有父元素的

4子绝父相 子绝兄弟相 给第二个div添加一个父div

4相对定位 将第二个div设置为relative

6子相父相

CSS固定定位[相对浏览器] 相对定位[相对自己] 绝对定位[有relative的元素]相关推荐

最新文章

热门文章

3绝对定位给第二个div设置absolute 没有父元素的

4子绝父相子绝兄弟相给第二个div添加一个父div

4相对定位将第二个div设置为relative