css定位样式详解

最新推荐文章于 2024-03-04 09:25:34 发布

无妄生欢688

最新推荐文章于 2024-03-04 09:25:34 发布

阅读量359

点赞数

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_56402822/article/details/121862746

版权

CSS 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

文章目录

一、定位样式详解
二、定位及特性
- 1.相对定位及特性
- 2.绝对定位及特性

一、定位样式详解

css position属性用于指定一个元素在文档中的定位方式，其中top(上)、right(右)、bottom(下)、left(左)属性则决定了该元素的最终位置
static 默认值，没有定位
relative 相对定位
absolute 绝对定位
sticky 粘性定位
fixed 固定定位

二、定位及特性

1.相对定位及特性

相对定位的元素是在文档中的正常位置偏移给定的值。
不影响其他元素布局
相对于自身进行偏移

2.绝对定位及特性

绝对定位的元素脱离了文档流，绝对定位元素不占据空间
具备内联盒子特性:宽度由内容决定
具备块级盒子特性:支持所有样式
绝对定位元素相对于最近的非static祖先元素定位，当这样的祖先元素不存在时，则相对于可视区定位
当父元素都有定位模式的时候，是以离最近的父元素由定位模式的做偏移

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

无妄生欢688

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css定位样式详解

文章目录一、定位样式详解二、定位及特性1.相对定位及特性2.绝对定位及特性
复制链接

扫一扫

专栏目录

【CSS笔记】CSS布局之五种定位方式（静态、相对、绝对、固定、粘性）

✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。

08-18

5666

设置元素的【position】属性值等于【absolute】绝对定位之后，如果没有设置【top，left、right、bottom】属性，那么就会默认都是0，这个时候元素就会移动到浏览器屏幕可见区域的左上角位置。relation相对定位，这个属性是相对于元素自身位置定位的，也就是说，某个元素使用相对定位之后，它是以没有使用相对定位之前显示的位置为参考点，上下左右移动多少距离，下面看个案例。CSS也支持相对于某个元素，进行绝对定位，也就是说，可以自定义当前元素是以哪个元素为参考点，从而完成绝对定位。...

CSS中的元素定位方法详解

09-25

在CSS中，元素定位是网页设计的关键组成部分，它允许开发者精确控制元素在页面上的位置。本文将深入探讨CSS中的元素定位方法，主要包括盒模型、定位属性（position）、display属性和float属性。首先，盒模型是理解...

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

Css样式--定位

LX_1234567的博客

10-16

486

Css样式--定位

定位

weixin_30896763的博客

03-09

113

文档流文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。关于定位我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下： relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。 ...

css样式定位

zxk1995的博客

05-11

451

块级元素和行级元素块级元素以块的形式展现，跟同级块元素依次竖直排列排斥和其他元素位于同一行，可以设定元素的宽和高块级元素一般是其他元素的容器可以容纳块级元素和行内元素可以设置四个方向的 padding 和 margin 值常见的块级元素 p div hn 行内元素不可以设置宽和高但他可以与其他行内元素位于同一行行内元素尽量不要包含...

1.8 常用CSS样式3：定位

尹成的技术博客

11-09

382

关于定位我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下： relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移 absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body...

详解CSS粘性定位 sticky

12-11

CSS粘性定位（sticky positioning）是CSS布局中的一种特性，它允许元素在用户滚动页面时在特定条件下保持可见。在CSS中，`position: sticky`是实现这一效果的关键。这个属性可以看作是`static`（无定位）和`fixed`...

Css样式–背景样式详解

12-13

3.背景图像：背景重复背景定位复制代码代码如下: p.flower {background-image: url(/i/eg_bg_03.gif); padding: 20px;background-repeat: repeat-y;<code>background-position:center;</code>} 背景重复：repeat...

CSS背景图坐标定位详解及负数的使用技巧

12-11

在CSS中，背景图像的定位是一项关键技能，它允许开发者精确控制元素背景的显示位置。在本文中，我们将深入探讨背景图的坐标定位及其负数使用技巧。首先，要了解背景图像定位的基本概念。背景图的定位涉及到两个...

CSS定位样式

长风破晓

07-24

895

使用定位样式可以控制元素的位置，常用的定位方式包括3种定位方式，一种是static定位方式，即默认定位方式，一种是relative定位方式，即相对定位方式和最后一种为absolute定位方式，即绝对定位方式。 1.定位样式position 定位样式position的语法： position:取值其中，取值有3个：默认值：static 相对定位：relative 绝对定位：ab

CSS样式定位

qq_34416191的博客

06-12

404

CSS样式定位 /*绝对定位：以网页坐标系为基准进行定位*/ #box-abs{ position:absolute; left:100px; top:100px; border:1px dashed red;

定位样式详解

wdq121516的博客

08-13

198

定位样式详解概念 position:定位样式，主要包含 relative,absolute,fixed,sticky等四个值 relative:相对定位参照自己没有脱离文档流 absolute:绝对定位参照最近的被定位的父元素脱离文档流 fixed:固定定位参照浏览器窗口定位脱离文档流 sticky:粘性定位参照浏览器窗...

CSS样式中如何使用定位功能。

Jsy_997的博客

04-08

792

什么是定位？如何去使用定位属性

CSS样式的定位

masterShaw的博客

04-28

715

当元素没有position定位属性时，所有元素按照他们自己的定位标准进行定位，比如说：每一个div标签就占一行。但是当元素我有了position属性，那么div原先占有一行的属性就被覆盖掉了（可以说没有用了）。例： Insert title here #block{ background:red; width:200px; hei

css中的定位方式总结以及相关样式display

qq_42474515的博客

04-02

378

css样式元素的相对定位，绝对定位，固定定位等元素定位运用技巧详解

最新发布

景天科技苑

03-04

2434

在CSS中关于定位的内容是：position:relative | absolute | static | fixed。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。在文本流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。

绝对定位的css样式,css 定位(相对定位与绝对定位)

weixin_40000301的博客

08-03

165

static是position的默认值position:relative与position:absolute及position:fixed三种方法了，下面我们一起来看看这几种定位的例子。可以使用 position:relative 对元素从排列顺序的当前位置进行偏移可用position:absolute 对元素从排列顺序的当前位置或依照定位最近的祖先元素进行偏移用position:fixed 对元...

Css样式详解--定位

程序从零开始

09-27

681

1.基本概念：（1）定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。（2）div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。（3）实用display来改变框类型。d

css选择器，背景和定位

ECHO的博客

09-21

198

css中比较特殊的属性选择器： /*只有带有属性且属性值匹配的控件才会选中*/ [title=ptitle] { color: blueviolet; } 例如： <p title="ptitle">title</p> 关于背景的css样式： /*选择的标签*/ { /*height:设置高度*/ height: 900px; /*b...

CSS样式属性详解与应用

这些属性只是CSS样式的一部分，实际中还有更多如边框、盒模型、定位、过渡、动画等复杂概念。理解并熟练运用这些属性，可以帮助开发者精确地控制网页元素的样式，实现丰富的视觉效果和交互体验。