CSS静态定位法

最新推荐文章于 2024-07-07 17:22:42 发布
最新推荐文章于 2024-07-07 17:22:42 发布
阅读量206 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52634719/article/details/127558216
版权

下面研究盒子放在哪里的问题

定位法主要有4种

 有一种是静态定位，静态定位是它的默认定位方式

 

静态定位走的是文档流

 

一行排不下，从第二行开始走

 

我们来查一下

 

可以看到static

 

静态定位不受这4个属性的影响

 

找个例子，这里是static后置修饰的div

 

 

爱雨天
关注
专栏目录
【CSS笔记】CSS布局之五种定位方式（静态、相对、绝对、固定、粘性）
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
08-18 5712
设置元素的【position】属性值等于【absolute】绝对定位之后，如果没有设置【top，left、right、bottom】属性，那么就会默认都是0，这个时候元素就会移动到浏览器屏幕可见区域的左上角位置。relation相对定位，这个属性是相对于元素自身位置定位的，也就是说，某个元素使用相对定位之后，它是以没有使用相对定位之前显示的位置为参考点，上下左右移动多少距离，下面看个案例。CSS也支持相对于某个元素，进行绝对定位，也就是说，可以自定义当前元素是以哪个元素为参考点，从而完成绝对定位。...
什么是css绝对定位与相对定位,CSS相对定位与绝对定位
weixin_39664136的博客
08-04 1106
1.相对定位Position : relative ;特点：1 如果没有定位偏移量，对元素本身没有任何影响；2 不使元素脱离文档流，空间是会被保留；3 不影响其他元素布局；4 left、top、right、bottom是相对于当前元素自身进行偏移的。代码：初始效果为三个方形并列向下，对box2添加了相对定位，box2相对于本身left: 100px，发生位移后，box2实际占位为偏移前的原位置而非...
【CSS】定位 ② ( 静态定位 | 相对定位 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-11 602
一、静态定位 二、相对定位 1、标准流下的盒子模型代码示例 2、相对定位下的盒子模型代码示例
CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
最新发布
朝阳39的博客
07-07 1254
依据最近一层的定位元素（position 值为 absolute/relative/fixed 的元素）定位，若无定位元素，则依据 body 定位。必须配合 left,right,top,bottom 一起使用，否则元素还在原文档流的位置。必须配合 left,right,top,bottom 一起使用，否则元素还在原文档流的位置。黏性定位元素的父元素高度不能和黏性定位元素的高度相同（否则没有实现黏性效果的空间）父元素相对定位，子元素绝对定位，常用于实现子元素重叠在父元素上。
CSS静态定位和绝对定位
m0_46744635的博客
08-19 252
浅谈CSS四大定位：static&relative&absolute&fixed
liangxz0311的专栏
03-30 1050
position属性有四个值，分别是静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)，默认position值是static。 使用默认定位值的static效果。 <DOCTYPE html /> <html> <title>position定位</title> <style type="text/css"> *{padding:0
div+css静态html网页模板.rar_css网页_html CSS_html简单模板_troopsokc_静态网页 模板
09-21
这个压缩包文件"div+css静态html网页模板.rar"提供了一个适合初学者练习和学习的基础HTML和CSS网页模板。下面，我们将详细探讨这些知识点。 首先，HTML（HyperText Markup Language）是用于创建网页结构的标准标记...
装修公司div+css静态模板.zip
03-18
《装修公司的div+css静态网页模板解析》 在网页设计领域，HTML和CSS是构建网站的基础，而div+css布局模式则是现代网页设计的核心技术之一。"装修公司div+css静态模板.zip"是一个专为装修公司设计的静态网页模板，它...
css图片定位
05-01
CSS提供了多种定位方式，包括静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。静态定位是元素的默认定位方式，不改变元素在文档流中的位置。相对定位则...
CSS3定位和浮动详解
12-13
- `static`（静态定位，默认值）：元素遵循正常的文档流。 - `relative`（相对定位）：元素相对于其正常位置进行偏移，不影响其他元素的位置。 - `absolute`（绝对定位）：元素相对于最近的非`static`定位的祖先...
css相对定位，绝对定位，static定位
翟浩浩Android专栏
10-25 1565
http://www.w3school.com.cn/css/css_positioning.asp--> html> html> head lang="en"> meta charset="UTF-8"> title>title> style> *{ padding: 0; margin: 0;
html 绝对定位案例,css定位案例探讨（position属性详解）
weixin_32246721的博客
06-07 229
简述定位问题一直是新手学习css的一个难点，现在我将他们总结出来，希望对大家有帮助position详解在css中，通过position属性，配合top,right,left,buttom对元素进行定位position属性有：static，relative，absolute，fixed四种，下面分别探讨默认定位staticDocument.container {width: 400px;height...
css静态定位详解,CSS中的定位方式，相对、绝对、固定、静态，瞬间搞懂
weixin_35385462的博客
08-04 698
码农公社 210.net.cn210是何含义？10月24日是程序员节，1024 =210、210既210之意。定位??position一、基本概念1、CSS定位属性允许您定位元素。它还可以将元素放置在另一个元素之后，并指定当元素的内容太大时应该怎么做。2、可以使用top，bottom，left，right属性定位元素。但是，首先要设置position属性，否则这些属性将不起作用。二、静态定位...
CSS中的静态定位、固定定位、绝对定位和相对定位
热门推荐
一生为追梦的博客
11-29 1万+
相对定位： 层级关系为： 效果图： 为改变参照物（橘色框）后的效果 层级关系为： 效果图： 参照物为最顶级的元素情况。 层级关系为： 效果图：   仅使用margin属性布局绝对定位元素的情况 此情况，margin-bottom 和margin-righ
CSS四种定位-静态定位和相对定位
WangZhang_521的博客
01-02 175
01-静态定位 布局中很少用到，了解即可 02-相对定位（重要） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s
Css的4种定位
m0_62648436的博客
04-02 3383
css定位
CSS-静态定位，相对定位，绝对定位，固定定位的用法和区别详解
weixin_44486539的博客
10-05 2073
CSS 提供了三种基本的定位机制：普通流、浮动和定位；通过这三种方式可实现页面的排版布局 普通流 普通流中的元素的位置由元素在 (X)HTML 中的位置决定 块级元素独自占一行，在文本流中从上到下一个接一个地排列 行内元素在一行中并排排列，遇到父元素的边沿会换行继续排列 浮动 浮动会让元素脱离标准文档流，不再占原来的空间，可以让多个块级元素并排显示 定位 定位是将元素定在某个位置，...
CSS之⑳静态/相对定位·总结
笔岸柳影
02-17 438
CSS之⑳静态/相对定位·总结 QQ:3020889729 小蔡定位属性（包括模式属性和边偏移属性）定位的实现的最基本组成静态定位使用展示相对定位使用展示静态/相对定位的总结 ...
CSS定位详解：从静态到绝对，全面掌握五种定位方式
定位有五个主要的定位模式：静态定位（static）、绝对定位（absolute）、相对定位（relative）、固定定位（fixed）和粘性定位（sticky）。理解这些定位方式有助于创建响应式设计和优化用户体验。 1. **静态定位...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值