CSS-定位

最新推荐文章于 2024-06-20 23:42:45 发布

EddieRoyal

最新推荐文章于 2024-06-20 23:42:45 发布

阅读量303

点赞数

分类专栏：前端CSS 文章标签： css position

本文链接：https://blog.csdn.net/IE_World/article/details/48193151

版权

前端CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

static

元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中.

relative

元素框偏移某个距离.元素仍保持其未定位前的形状,它原本所占的空间仍然保留.

absolute

元素框从文档流中完全删除,并相对于其包含块定位.包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身.

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

EddieRoyal

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-定位

static relative absolute fixed
复制链接

扫一扫

专栏目录

CSS布局-定位以及层级关系

NewHouser的博客

10-19

2440

适用于在网页中需要特定排版位置的元素使用，一般出现于有嵌套关系的盒子模型中。定位分为静态定位、相对定位、绝对定位、固定定位。

css定位页面元素,页面元素定位-CSS元素基本定位

weixin_32147807的博客

08-04

2255

基本定位"""属性定位一 """# #通过id# driver.find_element_by_css_selector("#kw").send_keys(u"博客园")# #通过class# driver.find_element_by_css_selector(".s_ipt").send_keys(u"博客园")#通过标签数量过多的情况下需要增加标签过滤# driver.find_ele...

参与评论您还未登录，请先登录后发表或查看评论

17.前端笔记-CSS-定位

虽然但是

12-03

1149

定位：静态、固定、绝对、粘性、相对定位

CSS-----绝对定位盒子水平居中

wode39的博客

08-08

1219

正确做法：子盒子通过left属性向右移动父盒子宽度的50%，再通过margin-left负值向左移动自身宽度的50%；垂直居中同理可得：通过top属性向下移动父盒子高度的一半，再通过margin-top负值向上移动自身个高度的一半。在CSS中绝对定位的盒子无法通过margin：0 auto;.........

CSS-浮动与定位

花城的博客

08-28

4716

CSS浮动. 父标签的塌陷问题及解决方法、溢出属性、CSS定位. 定位方法. 修改位置. 是否脱离文档流、z-index属性、透明度

css---相对定位+绝对定位实现元素居中

string佳佳的博客

03-29

2133

效果图实现方式 <view class="img-wrap"> <image mode="aspectFill" class="img-bg" src="{{userInfo.avatarUrl}}"></image> <view class="info-wrap"> <image src="{{userInfo.avatarUrl}}" /> <view

css---窗口定位（固定定位）和滚动条设置

weixin_46218101的博客

10-09

3349

前端入门笔记之css（7）窗口定位：根据窗口进行定位。可以滑动，广告栏类似的状态；有滚动条的话，一直跟着窗口走；绝对定位不会跟着窗口走。 {position：fixed；left:300px;top:300px}

移动端布局之postcss-px-to-viewport

大灰狼的小绵羊哥哥的博客

09-29

1万+

移动web布局

解决postcss、postcss-loader 和less-loader 导致的报错问题

热门推荐

筱竹的博客

03-19

1万+

这里写自定义目录标题欢迎使用Markdown编辑器一、问题背景介绍二、报错问题分析：欢迎使用Markdown编辑器解决 Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8. 一、问题背景介绍 1、在Vue的项目中使用了postcss-pxtorem这个包，同时在项目根目录中，配置了postcss.config.js,如下图所示： module.exports = { plugins: { 'autopr

CSS相对定位

weixin_52629592的博客

06-20

4628

当元素的position设置为relative时,则开启了元素的相对定位用法: position: relative ;相对定位的特点:元素开启相对定位之后, 如果不设置偏移量,元素不会发生任何变化(因此,我们在使用相对定位的时候,一定要设置元素的偏移量)相对定位是参照于元素在文档流中的位置进行移动的相对定位会提升元素的层级即当我们设置一个元素的位置与另一个元素冲突时,设置了相对定位的元素会显示在未设置定位元素的上面相对定位不会使元素脱离文档流相对定位不会改变元素的性质.块元素还是块元素,行元素还是行元素下

css-sprite使用详解

09-25

这个模板会根据合并的每个图像生成对应的CSS类，每个类包含了背景位置、宽度、高度等信息，以便在HTML中通过不同的背景定位来显示单个图像。在HTML中使用这些样式时，只需给元素添加对应图像的CSS类，例如： ```...

chenyongzhe#programming-data#CSS-06-定位1

07-25

1.1 不脱标，老家留坑，形影分离 1.2 相对定位用途 1.3 相对定位的定位值 1.4 特性总结 2.1 绝对定位脱标 2.2 参考点 2.3 以盒子为参考

CSS-position(定位）

03-25

CSS-position(定位）中的static、relative、fixed、absolute、sticky以及重叠的简单应用

advanced-css-course

04-05

高级CSS课程编写好HTML和CSS的三个Struts 响应式设计可维护和可扩展的代码网络性能响应式设计流体布局媒体查询响应式图像正确的单位桌面优先与移动优先可维护和可扩展的代码干净的容易明白生长可重复...

postcss-pxtorem:使用PostCSS将像素单位转换为rem（根em）单位

04-06

CSS+JS：通过修改filter实现图片颜色随时间渐变

最新发布

qq_45820271的博客

06-20

251

【代码】CSS+JS：通过修改filter实现图片颜色随时间渐变。

CSS实现文字上下滚动、间歇滚动和无限滚动

Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~

06-19

363

主要记录了用CSS实现文字上下滚动、间歇滚动和无限滚动效果

Tailwindcss 提取组件

valsedefleurs的博客

06-20

742

Tailwindcss 提取组件

css记录：三维变化之transform-style

计算机图形学

06-19

446

是 CSS 3D 转换中的一个重要属性，它定义了嵌套元素如何在 3D 空间中呈现。当你对一个元素应用 3D 转换（如rotateX()rotateY()rotateZ()等）时，这个元素的子元素默认会在 2D 平面上进行转换，而不是在 3D 空间中。属性允许我们改变这种行为，使得子元素也能在 3D 空间中进行转换。

css绝对定位相对定位

06-14

CSS中的定位属性是布局控制的重要工具，它主要有两种主要方式：绝对定位（absolute positioning）和相对定位（relative positioning）。 **1. 相对定位 (Relative Positioning)**： - 原则：相对定位是基于元素的正常文档流来进行定位的。如果设置了`position: relative;`，元素会保持其在文档中的默认位置，然后可以通过`top`, `right`, `bottom`, 和 `left` 属性指定偏移量。 - 行为：相对定位的元素不会影响到其他元素的位置，它会在原位置的基础上移动，同时周围的元素会围绕它移动。 - 示例：你可以使用相对定位来创建一个弹出框或浮动元素。 **2. 绝对定位 (Absolute Positioning)**： - 原则：绝对定位元素会脱离正常的文档流，完全根据`top`, `right`, `bottom`, `left` 属性以及`position: absolute;`声明来定位，与最近的已定位（`position: relative;`）祖先元素相关联，如果没有，则相对于视口（浏览器窗口）定位。 - 行为：绝对定位元素会完全离开其在文档中的原始位置，其他元素也不会因此受到影响，除非它们也设置为绝对定位并覆盖了该元素。 - 示例：通常用于创建固定在页面某个角落的导航菜单或图片，或者是响应式的网页设计中，如轮播图中的图片。 **相关问题**: 1. 相对定位和绝对定位有什么区别？ 2. 如何使用`position: relative;`和`position: absolute;`来配合使用？ 3. 绝对定位的`z-index`属性有什么作用？

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交