CSS之 Box Position

最新推荐文章于 2024-11-11 23:45:17 发布
最新推荐文章于 2024-11-11 23:45:17 发布
阅读量190 收藏
点赞数
分类专栏： 前端 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ha_soga/article/details/123194533
版权
本文详细解读CSS position属性（static, relative, absolute, fixed）的工作原理，并介绍Z-index在元素层级控制中的应用。通过实例说明如何利用这些概念布局和调整元素在页面上的位置。
摘要由CSDN通过智能技术生成

static

浏览器默认分配位置，没有给定位置（not positioned）。效果就是没有效果

relative

先按照默认分配完整体所有位置后，根据元素被分配的默认位置定位现在位置。即使现在位置覆盖了其它元素的位置也继续执行，可以定位在其它元素的上边

absolute

根据最接近的上一个positioned（给定位置） ancestor位置定位现在位置

fixed

根据网页视窗定位现在位置（鼠标滑动网页视窗，元素位置不动）  --  浮窗广告

Z-Index

元素的Z轴，控制元素堆叠。只能作用于positioned 元素

Z-Index的计算根据元素最原始的ancestor的Z-Index决定

比如位于上海（高楼的最原始祖先）的高楼没有青藏高原（小屋的最原始祖先）的小屋海拔高

css基本属性（display、padding、position、浮动：float、box-sizing）
polar_night_down的博客
10-24 2611
display display 属性规定元素应该生成的框的类型。 none ：此元素不会被显示。 block ：此元素将显示为块级元素，此元素前后会带有换行符。 inline ：默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block ：行内块元素。（CSS2.1 新增的值） JavaScript 语法： object.style.display=“inline” 例：document.getElementById(“p1”).style.display=“none”; 例
css-box-model-challenge
03-06
"css-box-model-challenge"显然是一个旨在帮助学习者深化理解并实践CSS盒子模型的练习项目。 CSS盒子模型，也称为Box Model，是每个HTML元素在网页中呈现的方式。它包括四个部分：内容区域（Content）、内边距...
box-sizing与position绝对定位的相互作用
wang845252276的专栏
11-02 1819
起初没用box-sizing:border-box;时没遇到过此问题,如图: 模拟的下拉列表框居然和文本框不一致,没有滚动条时是相同的. 此情况的触发条件有: IE 浏览器 支持 box-sizing 属性 div 为绝对定位(absolute)
css中的position、box-sizing你搞懂了吗？
子时不睡的博客
01-16 826
css中重要的position属性，你是否真正的搞清楚了？
HTML5高级之position(定位)
热门推荐
Wendy
11-15 8万+
position 属性规定元素的定位类型，定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。      position一般分为三种，一种是相对定位relative，一种是绝对定位absolute，一种是固定定位fixed，接下来分别说明这三个属性的用法以及相对应的特性，并举例说明。
css.rar_btn_search_box.gif_css search box
09-21
"css.rar_btn_search_box.gif_css search box" 这个资源是关于如何利用CSS和一张图片来美化搜索框的教程。下面将详细讲解这一主题。 首先，我们来了解一下CSS（Cascading Style Sheets）的作用。CSS是一种样式表...
浅谈CSS中display/float/position属性值的相互影响
12-13
有3个属性和布局以及box的创建有关：’display’, ‘position’ 和 ‘float’，彼此交互作用如下： 如果’display’值为’none’，则’position’ 和 ‘float’无作用。这种情况下，不生成box。 否则，如果’...
详解CSS中的Box Model盒属性的使用
09-24
Box Model是CSS布局的核心概念，它定义了网页元素在页面上的占用空间，包括内容区域(content)、内边距(padding)、边框(border)和外边距(margin)四部分。理解Box Model对于精确控制元素的尺寸和布局至关重要。 正常...
CSS的定位（文档流，相对定位，绝对定位，固定定位）
2301_82005922的博客
11-11 674
讲述了CSS的定位中文档流，相对定位，绝对定位，固定定位的定义和如何在HTML5文档中应用
第8章 利用CSS制作导航菜单.
w_wx8866的博客
11-11 448
我们在浏览网页的时候可以看见许多位于顶部的导航栏，供我们点击跳转。
24.11.10 css
最新发布
2401_87910368的博客
11-11 253
属性用于创建浮动框，允许元素向左或向右浮动，使其脱离常规的文档流。浮动元素会移动到包含块的左端或右端，直到它的外边缘接触到包含块或另一个浮动元素的边缘。​ 行内块() 从走到右排列 宽高有效 图片 表单元素(输入框 选择框 按钮.....)div+css布局 实际上就是在页面中画格子 大格子中套小格子。​ 行内(inline) 从左到右排列 宽高无效。​ 块 (block) 从上到下排列 宽高有效。伪类选择器 (选取元素的交互状态)1,2 后加载的覆盖先加载的。选择器组合方式 (了解即可)
css中的变量使用
qq505751223的博客
11-11 138
在 CSS 中，变量使用--前缀来定义。通常在:root选择器中定义全局变量，以便在整个文档中使用。:root {定义变量：使用--前缀在 CSS 中定义变量。使用变量：使用var()函数引用变量。全局变量：在:root选择器中定义，可在整个文档中使用。局部变量：在特定的选择器中定义，只在该选择器及其子选择器中有效。动态更新：可以通过 JavaScript 动态更新 CSS 变量，实现动态样式变化。CSS 变量可以在任何选择器中定义，不一定要写在:root里面。:root。
vue2项目启用tailwindcss - 开启class=“w-[190px] mr-[20px]“ - 修复tailwindcss无效的问题
Rudon滨海渔村的博客
11-11 401
Tailwind CSS是utility-first(功能类优先)的CSS框架，功能类优先是指在一组受约束的原始功能类的基础上构建复杂的组件，Tailwind CSS内置了很多CSS类，直接放在HTML class属性中，以代替CSS。 项目中安装配置Tailwind CSS很简单，这里不再赘述，看官网文档即可。使用Tailwind CSS后，我们不再去写内联样式或者css文件，而是在html标签的class属性中写一连串类名就行了。
第七章 利用CSS和多媒体美化页面习题
KO2131855283的博客
11-11 383
【代码】第七章 利用CSS和多媒体美化页面习题。
CSS如何改变滚动条的颜色样式粗细？
zhangxueyou2223的博客
11-07 293
默认滚动条很丑怎么办？如何改版滚动条的粗细，颜色，让它更美观？CSS如何改变滚动条的粗细？干货来了 🧨🧨🧨 完结，撒花~ ，记得收藏 ~
CSS查缺补漏 two
lalalalalab的博客
11-11 704
累shu我嘞~~~
解决vite项目tailwindcss不生效！！（Vue3、tailwindcss失效）
xxx
11-08 274
vite.config.ts或者vite.config.js// ...plugins: [// ...config: 'tailwind.config.js', // Tailwind CSS 配置文件路径}),],})
【css】overflow: hidden效果
-凌凌漆-的博客
11-07 215
【代码】【css】overflow: hidden效果。
CSS教程（二）- CSS选择器
Oblning的博客
11-10 967
css选择器，标签选择器，ID选择器，类选择器，通用选择器，群组选择器，子代选择器，后代选择器，伪类选择器，focus，hover，activate
理解并掌握CSS position属性及其实例应用
CSS position属性是网页布局中至关重要的一个特性，它控制元素在页面中的定位方式，使得开发者能够精确地控制元素相对于其父元素或浏览器窗口的位置。该属性在主流浏览器（除IE8及更早版本，以及IE9、IE10未经充分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值