转载 -- CSS相对，绝对，固定，静态定位和显示效果——每天一遍小知识

最新推荐文章于 2024-10-25 17:02:44 发布

建筑队学徒

最新推荐文章于 2024-10-25 17:02:44 发布

阅读量103

点赞数

文章标签： css

原文链接：https://blog.csdn.net/weixin_46654114/article/details/105949043?utm_medium=distribute.pc_category.none-task-blog-hot-7.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-7.nonecase&request_id=

版权

转载博客，感谢原创。

CSS相对，绝对，固定，静态定位和显示效果——每天一遍小知识

RodamChen 2020-05-08 09:31:02

1192

原力计划

最后发布:2020-05-08 09:31:02 首发:2020-05-08 09:31:02

分类专栏： CSS

本文链接： https://blog.csdn.net/weixin_46654114/article/details/105949043

展开

在这里插入图片描述
前言

这是我在这个网站整理的笔记，接下来还会持续更新。
B站用户名：RodmaGO
作者：RodmaChen
转载说明：务必注明来源，附带本人博客连接。

文字显示和定位

一.显示属性——display

1.块元素——block

介绍：块元素是占据最大可用宽度的元素，前后都有换行符。
事列：下例中的样式规则将内联元素显示为块级元素：

HTML

<span>内容</ span> 

     
     
     
     1

CSS

span {
   display: block;
}

作者：RodmaChen

2.内联元素——inline

介绍：不强制换行

p { 
   display：inline ; 
}

 
 
 
 1
2
3

3.隐藏元素——none

介绍：元素将被隐藏，并且页面将显示为该元素不在其中。

h1 {
   display: none;
}

 
 
 
 1
2
3

二.是否显示——visibility

介绍：visibility属性指定是否一个元素是可见（visible）或隐藏（hidden）。

HTML

<div class="hidden">
   This text will not display in browser.
</div>

 
 
 
 1
2
3

CSS

div.hidden {
   visibility: hidden;
}

 
 
 
 1
2
3

三.定位——position

1.基本概念

CSS定位属性允许您定位元素。它还可以将元素放置在另一个元素之后，并指定当元素的内容太大时应该怎么做。作者：RodmaChen
可以使用top，bottom，left，right属性定位元素。但是，首先要设置position属性，否则这些属性将不起作用。

2.静态定位——static

HTML元素默认情况下处于静态位置。始终根据页面的正常流程来定位静态定位的元素。作者：RodmaChen

<p class="position_static">作者博客https://blog.csdn.net/weixin_46654114</p>

 
 
 
 1

p.position_static {
   position:static;
   top: 30px;
   right: 5px;
   color: red;
}

 
 
 
 1
2
3
4
5
6

静态定位的元素不受top，bottom，left和right属性的影响。

3.固定定位——Fixed Positioning

固定位置的元素相对于浏览器窗口定位，并且即使滚动窗口也不会移动。

p.position_fixed {
   position: fixed;
   top: 30px;
   right: 5px;
   color: red;
}

 
 
 
 1
2
3
4
5
6

在这里插入图片描述
通俗的话讲就是：一动不动。

4.相对定位——Relative Position

相对于自身的一种定位，随意改变移动他的位置并不会影响其他元素的位置。作者：RodmaChen

HTML

<p>作者是谁 <span>RodmaChen </span> 给个赞吧。

 
 
 
 1

CSS

p {
   width: 350px;
   border: 1px black solid;
   position: fixed;
}
span {
   background: green;
   color:white;
   position: relative;
   top: 150px;
   left: 50px;
}

 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12

在这里插入图片描述

相对定位的元素的内容可以移动并与其他元素重叠，但是仍保留该元素的空间。

5. 绝对定位——Absolute Position

绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left，right，top，bottom进行绝对定位。
绝对定位的元素可以与其他元素重叠。

6.自我总结，代码效果

HTML

<p>没有定义的段落</p>
<p>没有定义的段落</p>
<p>没有定义的段落</p>
<p>没有定义的段落</p>
<p>没有定义的段落</p>
<p>没有定义的段落</p>

没有定义的段落

这是绝对定位作者 RodmaChen. 
没有定义的段落
没有定义的段落
没有定义的段落

这是固定定位作者 RodmaChen

没有定义的段落
没有定义的段落

这是相对定位作者 RodmaChen

没有定义的段落
没有定义的段落

CSS

.abs {
    width: 150px;
    left:100;
    border: 3px black solid;
    position: absolute;}
    /* it works without top/bottom
    or left/right */
.fix {
    width: 150px;
    border: 2px red dotted;
    position: fixed;
    top:50; left:100;}
    /* work only with positioning */
.rel {
    width: 150px;
    border: 1px blue dashed;
    position: relative;}

 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

输出效果

在这里插入图片描述

作者：RodmaChen
本人博客：https://blog.csdn.net/weixin_46654114
qq：1342709867
转载说明：务必注明来源，附带本人博客连接。

请给我点个赞鼓励我吧
在这里插入图片描述

RodamChen

原创文章 31 获赞 512 访问量 3万+

关注私信

原创作者：https://blog.csdn.net/weixin_46654114
博客原地址：https://blog.csdn.net/weixin_46654114/article/details/105949043?utm_medium=distribute.pc_category.none-task-blog-hot-7.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-7.nonecase&request_id=