相对定位position:relative;

最新推荐文章于 2022-11-23 16:24:04 发布
最新推荐文章于 2022-11-23 16:24:04 发布
阅读量320 收藏
点赞数
分类专栏： css 文章标签： position
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fuxiaomi2016/article/details/52816127
版权




<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:200px;
height:200px;
}
 .box1{
background-color:yellowgreen;
}
 .box2{

background-color:skyblue;

/*相对定位就是微调元素位置的，让元素相对自己原来的位置，进行位置调整*/

position:relative;    /*相对定位不脱标准流、老家留坑、形影分离*/
top:100px;
left:400px;
/*margin-bottom:20px;   */
}
 .box3{
background-color:orange;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
fuxiaomi2016
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
定位：relative相对定位、absolute绝对定位、fixed固定定位
m0_64460142的博客
04-08 4619
作者有话说:在学定位之前有了解过吗？再没学浮动之前，这些块元素标签会出现在一列，要想实现并排就可以使用浮动float，现在我们可以学习定位，给背景图片或者图片、div、border等添加属性等，有定位在祖先级的、定位在浏览器的，比如说浏览京东页面时，当你拉动网页的时候页面会动，但是会有一个栏目始终保持在那个位置不动，这就是使用的定位，接下来一起看看吧！ 定位使用position static 默认值，没有定位 relative 相对定位 ...
relative相对于谁定位_CSS四种定位方式的详解
weixin_42118056的博客
01-24 4697
CSS布局的四种定位方式1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。参考上篇随笔。2、relative（相对定位）：定位为relative的元素脱离正常的文档流，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有移动。通过top,bottom,left,right的设置相对于其正常...
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
Z_CH8648的博客
11-23 3万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 position 属性指定了元素的定位类型，用于指定一个元素在文档中的定位方式。
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)
qq_44939011的博客
07-20 9648
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位) Position的取值： static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。 fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。 relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。 absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的父元素来定位。 1.static(静
相对定位——position: relative
weixin_48796690的博客
10-09 208
相对定位——position: relative
css中position:relative和overflow:hidden之间的问题
09-25
问题在于，当父元素设置了`overflow:hidden`，而子元素设置了`position:relative`，在某些版本的IE浏览器（特别是IE6和IE7）中，`overflow:hidden`无法正确隐藏那些相对定位的子元素。这是由于这些旧版IE浏览器的...
CSS中的position:relative;的作用示例介绍
12-10
这种定位方式不会使元素脱离文档流，因此其他元素不会因为这个相对定位的元素而改变位置。 3. **absolute**：设置`position:absolute;`会使元素脱离文档流，根据最近的非`static`定位的祖先元素进行定位。如果找不...
如何用float配合position:relative实现居中
09-25
然后，`position:relative`属性允许我们相对元素原本的位置进行定位。通过设置`left`或`right`属性，我们可以使元素在水平方向上偏移。当设置`left:50%`时，元素会向左偏移其自身宽度的一半，这样就相当于将元素的...
IE7 position:relative的问题
09-25
然而，IE7有时需要父元素也具有`position:relative`或者`position:absolute`属性，才能正确地处理子元素的相对定位。这是因为IE7在处理相对定位时，需要一个明确的包含块来确定元素的定位参照点。这就是描述中提到的...
Absolute（绝对定位）与relative（相对定位）的图文讲解
热门推荐
weixin_42067967的博客
04-30 9万+
Position的属性值有：1.     Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位2.     Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。3.     Relative：相对定位，是相对于其原本的位置来定位的。4.     Static：默认值，没有定位。5.     Inherit：继承父元素的position值。对于初...
Position属性之relative用法
evilcry2012的专栏
11-24 2万+
Position属性之relative用法 投稿：mrr 字体：[增加 减小] 类型：转载 时间：2015-12-14 我要评论 Relative是position的一个属性，是相对定位，通过本篇文章给大家介绍Position属性之relative用法，对position属性relative相关知识感兴趣的朋友一起学习吧 Relat
CSS 元素的定位之相对定位 position: relative
歪脖先生的博客
02-21 1万+
定位在CSS中，通过 position属性来对元素进行定位，可选的定位类型有 static | relative | absolute | fixed，默认值为 static，表示没有定位，元素保持在它原本应该在的位置上。要对页面元素使用定位技术，必须 position属性设置为 static 之外的其它 3 个属性值，即相对定位、绝对定位、固定定位。相对定位当一个元素的 position属性设置...
相对定位(relative)，绝对定位(absolute)，固定定位(fixed)
weixin_44446758的博客
05-08 1万+
一、绝对定位 position：absolute 绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（html）。 绝对定位本身与文档流无关，因此不占空间，元素会脱离文档流，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，并且可以通过z-index属性来...
position 有哪些值？absolute/relative 是相对于谁定位的？
scorpio的世界
02-18 1018
absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 relative: 生成相对定位的元素，相对于其正常位置进行定位。 fixed: 生成绝对定位的元素，相对于视窗口进行定位. static：默认值。没有定位 inherit：规定应该从父元素继承 position 属性的值。 ...
相对定位——relative
weixin_33973600的博客
10-10 280
<!-- -定位：把指定的元素摆放在页面的任意位置(即：通过定位可以任意的摆放元素) -通过position属性设置元素的定位: -可选值为： static 默认值。元素没有开启定位。（忽略left、right、top、botto...
position中relative和absolute属性详解
TTO_OTT的专栏
12-05 1017
看了这么多有关relative和absolute的属性介绍，我觉下面的最容易理解。 关于relative和absolute这段话更简洁 absolute： absolute英文意思是绝对的意思,实际上是针对父级元素元素定位,且不占用父级元素其他位置（relative定位仍把原来的位置保留）， 如果父级元素没有position:relative|absolute,则追至再上一个父级元素,直至
position的值，relative和absolute分别相对于什么定位
michael8512的博客
09-14 2252
absolute：生成绝对定位的元素， 相对于最近一级的定位不是 static 的父元素来进行定位。 fixed：（老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。 relative：生成相对定位的元素，相对于其在普通流中的位置进行定位。 static： 默认值。没有定位，元素出现在正常的流中 sticky：生成粘性定位的元素
定位布局（relative）相对定位
归尘
08-10 507
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>relative</title> <style> .outer{ background-color: #ccc; } .outer > div ...
position: relative相对定位和绝对定位如何表示
最新发布
04-13
相对定位的表示方式是通过设置元素的position属性为relative来实现。例如： ``` <div style="position: relative;"> <!-- 元素内容 --> ``` 而绝对定位（position: absolute）是CSS中另一种常用的定位方式，它使...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值