CSS相对定位

最新推荐文章于 2024-04-03 04:38:30 发布
最新推荐文章于 2024-04-03 04:38:30 发布
阅读量121 收藏
点赞数
分类专栏： Java CSS 文章标签： css3 相对定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45672377/article/details/111311657
版权
Java 同时被 2 个专栏收录
40 篇文章 1 订阅
订阅专栏
CSS
10 篇文章 0 订阅
订阅专栏

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="father">
    <div class="page1">
        <a href="#">链接1</a>
    </div>

    <div class="page2">
        <a href="#">链接2</a>
    </div>
    
    <div class="page3">
        <a href="#">链接3</a>
    </div>

    <div class="page4">
    <a href="#">链接4</a>
    </div>

    <div class="page5">
        <a href="#">链接5</a>
    </div>
</div>
</body>
</html>

css

.father{
    border: 2px solid red;
    height: 300px;
    width: 300px;
    padding: 10px;
}

.page1{
    height: 100px;
    width: 100px;
    background-color: pink;
    display: block;
}

.page1:hover{
    background-color: blue;
}

.page1 a{
    text-decoration: none;
    color: white;
    line-height: 100px;
    text-align: center;
    display: block;
}

.page2{
    height: 100px;
    width: 100px;
    background-color: pink;
    display: block;
    position: relative;
    left: 200px;
    top: -100px;
}

.page2:hover{
    background-color: blue;
}

.page2 a{
    text-decoration: none;
    color: white;
    line-height: 100px;
    text-align: center;
    display: block;
}

.page3{
    height: 100px;
    width: 100px;
    background-color: pink;
    display: block;
}

.page3:hover{
    background-color: blue;
}

.page3 a{
    text-decoration: none;
    color: white;
    line-height: 100px;
    text-align: center;
    display: block;
}

.page4{
    height: 100px;
    width: 100px;
    background-color: pink;
    display: block;
    position: relative;
    left: 200px;
    top: -100px;
}

.page4:hover{
    background-color: blue;
}

.page4 a{
    text-decoration: none;
    color: white;
    line-height: 100px;
    text-align: center;
    display: block;
}

.page5{
    height: 100px;
    width: 100px;
    background-color: pink;
    display: block;
    position: relative;
    left: 100px;
    top: -300px;
}

.page5:hover{
    background-color: blue;
}

.page5 a{
    text-decoration: none;
    color: white;
    line-height: 100px;
    text-align: center;
    display: block;
}

在这里插入图片描述

向阳的人生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS-定位
JINGJID的博客
04-09 471
1.相对定位 position: relative; 相对于原来的位置进行指定的偏移，他仍然在标准流文档中，原来的位置会被保留 top ：10px ----距离上端10px的距离（向下偏移） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相对定位</title> <!-- 相对于原来的位置进行偏移--&g
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
热门推荐
Z_CH8648的博客
11-23 3万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 position 属性指定了元素的定位类型，用于指定一个元素在文档中的定位方式。
CSS——相对定位
m0_62379761的博客
04-22 829
CSS——相对定位
CSS中相对定位与绝对定位的区别及作用
XSL_HR的博客
04-14 2323
一篇文章带你快速掌握相对定位和绝对定位
css样式元素的相对定位，绝对定位，固定定位等元素定位运用技巧详解
景天科技苑
03-04 2343
在CSS中关于定位的内容是：position:relative | absolute | static | fixed。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。在文本流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。
CSS: 相对定位、绝对定位、固定定位 的基础知识及使用
无面人的博客
03-30 4579
CSS中相对定位、绝对定位、固定定位 的基础知识及使用
css之定位属性（相对、绝对、固定、粘性）
qq_53165476的博客
06-04 4202
2）可以使用 left、right、 top 、 bottom 四个属性调整位置，不过最常用的是 top 值.5）粘性定位和相对定位的特点基本一致，不同的是:粘性定位可以在元素到达某个位置时将其固定。都发生定位的两个元素，后写的元素会盖在先写的元素之上。5）无论是什么元素(行内、行内块、块级)设置为绝对定位之后，都变成了定位元素.5）无论是什么元素(行内、行内块、块级) 设置为固定定位之后，都变成了定位元素。1，定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
【前端】CSS中的相对定位，绝对定位和固定定位
爱学的萌萌虾
04-23 3263
相对定位和绝对定位，不改变元素的大小形状，只改变元素的位置。 相对定位和绝对定位是通过position属性来控制的，position属性的值为下面几种： position默认值为static,如果在css中不指定，则默认为static. 相对定位： 下面讲一下相对定位：对某元素设置了相对定位，那么首先...
详细了解前端中css的相对定位和绝对定位
qq_58883618的博客
03-17 2293
前端我目前只是了解一部分，但是也会不断地总结属于它地知识，这个就是css样式中地相对定位和绝对定位地理解，相信看完之后你会有不同地体会
CSS布局之定位 详解（相对定位、绝对定位、子绝父相、固定定位）
Esther_liew的博客
05-26 1887
CSS布局--定位详解（相对定位、绝对定位、子绝父相、固定定位）
css定位（相对定位和绝对定位）
m0_72975897的博客
08-11 3269
css定位（相对定位和绝对定位）
CSS五种定位(相对定位、绝对定位、固定定位、static定位、sticky 定位)模式学习笔记
做技术，坚持才是最重要的，一时的热情只是暂时的进步
09-29 1602
一、static定位 没有定位，遵循正常的文档流对象，不会受到 top, bottom, left, right影响。 .static { position: static;/*默认*/ width: 100px; height: 100px; border: 3px solid #73AD21; } 二、相对定位 相对该元素原本文档流的位置进行定位，且原本的位置保留。 <!DOCTYPE html> <html> <hea
css的相对定位和绝对定位（固定定位）
qq_51476492的博客
06-02 1万+
css的绝对定位和相对定位
CSS定位（相对定位、绝对定位、固定定位）
m0_57878719的博客
03-23 1045
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。脱离文档流的设置，遗留下的空间将由后面的元素填上 ，相对于距离最近的父元素进行定位，相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
css，相对定位
m0_48462345的博客
11-28 471
相对定位
css中的定位详解，27岁学前端开发
最新发布
2401_84091243的博客
04-03 860
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取[外链图片转存中…(img-fERSzdT7-1712090268267)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-uV6acKM2-1712090268268)]
css相对定位
lxllxl211的博客
10-03 223
2、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待他。相对定位是元素在移动位置的时候，是相对 他原来的位置 来说的。static 静态定位。relative 相对定位。absolute 绝对定位。fixed 固定定位。值 语义。1、他是相对于自己原来的位置移动的。很明显盒子发生了移动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值