css实现菜单过程中 relative , absolute的作用

最新推荐文章于 2023-10-21 09:42:12 发布
最新推荐文章于 2023-10-21 09:42:12 发布
阅读量155 收藏
点赞数
分类专栏： HTML/CSS 文章标签： CSS

在用css来实现菜单时,经常需要使用position:relative;来确定起始的相对位置,,之后再在其下的子菜单中进行相对位置定义,使用position:absolute; left 0px; bottom:-27px.

 

tigerpassion
关注
专栏目录
CSS的绝对定位absolute
李昆鹏的博客
05-11 402
-----------------------------CSS的绝对定位absolute---------------------------绝对定位设置绝对定位的元素从文档流中完全删除，以浏览器的左上角为相对位置，设置水平位置和垂直的位置。代码示例：<!DOCTYPE html> <html> <head> <meta charset="UTF-...
CSS中的position:relative;的作用示例介绍
12-10
在实际的网页设计和开发中，`position`属性的运用是非常广泛的，能够实现各种复杂的布局效果，包括弹出框、导航菜单、浮动提示等。熟练掌握`position`的用法，是成为一名优秀前端开发者的关键技能之一。
css之absolute
weixin_39037804的博客
09-14 376
一、absolute和float有相同的特性，包裹性和破坏性 1、absolute和float的相似(看下面的demo，如果图片在左上角，那么用float和absolute都一样) 1 <!docty...
CSS属性之absolute
u011927449的博客
05-15 575
0.脱离标准文档流 绝对定位的元素会脱离标准文档流，拥有z-index属性，并且对于它的任何操作和改变都不会影响它的兄弟元素和父级元素，这里就不过多介绍。 不过值得注意的是，虽然绝对定位元素脱离的标准文档流，但是它依然会受到父元素影响哦，比如line-height和text-align属性等。 1.跟随性 绝对定位的元素脱离标准文档流之后，并不是跑到了任意的位置，而是跟在前一个没有添加absolute或者fixed值的元素后面或者下面。 不过在设置了left/top/bottom/right这些值之后，它相
CSS深入理解之absolute
码飞_CC的博客
11-14 944
CSS深入理解之absolute
HTML+CSS实现下拉菜单的实现
09-22
在本篇中，我们将深入探讨如何使用 HTML 和 CSS 实现一个下拉菜单，这是一个常见的网页设计功能，常用于导航栏中，以节省空间并提供多级导航。 首先，我们来看一下给出的代码实例。这个例子中，下拉菜单被包含在一...
HTML+CSS实现简单下拉菜单效果
09-24
在本篇内容中，我们讲解的是如何使用HTML和CSS来实现一个简单的下拉菜单效果。这是一种常见的网页交互设计方式，使得用户在鼠标悬停（hover）在导航菜单项上时，可以展开一个子菜单，从而提供更为丰富的导航选项。...
纯CSS 级联菜单实现代码
09-27
在本文中，我们将深入探讨如何使用纯CSS实现跨浏览器兼容的级联菜单，特别关注对IE6的支持。 首先，级联菜单的基本原理是利用CSS的`:hover`伪类来控制子菜单的显示和隐藏。当鼠标悬停在父菜单项上时，子菜单将会...
纯CSS实现的多级下拉横向导航菜单代码
01-23
总之，纯CSS实现的多级下拉横向导航菜单是网页设计中的常见挑战，但通过熟练掌握CSS盒模型、定位、浮动、伪类选择器等技术，我们可以构建出既美观又实用的导航菜单。同时，不要忘记关注可访问性和响应性，确保菜单在...
浅谈css position absolute相对于父元素的设置方式
12-14
大家知道css的position absolute默认是根据document来设置的，比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角。 有时候我们需要在父元素的容器内设置相对的绝对位置 要做到这一点需要把父元素的position属性设置为relative，设置为relative之后不设置left和top属性，这时候父元素虽然是relative的，但是还是在原来位置。 然后把子元素的位置position设置为absolute的，并设置其left，top，right，bottom属性，这样就是相对于父元素的绝对位置了。 如下html示例代码：
CSS学习20：absolute（绝对定位）
玉安_ZhangDe的博客
04-09 6771
绝对定位的介绍： 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。 语法： 选择器 { position: absolute; } 1、完全脱标 —— 完全不占位置； 2、父元素没有定位，则以浏览器为准定位（Document 文档）。 3、父元素要有定位 i.元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。 ii.绝对定位的特点总结：（务必记住）...
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
最新发布
csgojingyu的博客
10-21 1万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
CSS 深入理解absolute
俊刚的博客
10-16 3009
absolute：绝对定位。越独立越强大，无依赖性。不受容器的限制。 独立的absolute可以摆脱overflow的限制，无论是滚动还是隐藏。 absolute与float不能一起使用，如果absolute生效，则float是无效的。 绝对定位可以配合margin实现相对定位。 动画尽量作用在绝对定位元素上。
CSS-absolute详解（慕课网）
eva_lu的博客
08-02 1406
（本文参考慕课网视频教程CSS-position 并加以总结） 一、absolute与float，relative的关系 注： absolute和float不能同时存在，对float元素添加absolute会去除浮动；对absolute元素使用float无效。 relative和absolute不是兄弟关系，是对立的分离的，absolute离开relative使用会更加强大 独立的...
css的绝对定位（absolute）、相对定位（relative）
流浪猫之家
11-24 513
CSS2.0 HandBook上的解释：  设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。  要激活对象的绝对(absolute)定
CSS属性详解——position:absolute
Wod_7的博客
06-04 1万+
绝对定位absolute定位是CSS中的一种定位方式，可以将元素精确定位到一个确定的点，这与元素在文档流上的自然位置无关。相比起其他定位方式，绝对定位很灵活性，它可以将元素脱离文档流，使得元素的位置不受页面上其他元素的影响。相应地，元素独立悬浮于页面上。
CSS绝对定位absolute详解
热门推荐
嘿嘿
01-16 2万+
之前介绍过CSS浮动float详解，本篇介绍的绝对定位absolute和浮动float有部分相似性。如果能理解浮动float，对理解绝对定位absolute会大有帮助。 先说absolute和float的相似处：包裹性 和 高度欺骗 包裹性 所谓一图胜千言（唯一的区别是：下图的div增加了absolute） <div style="border:4px solid blu...
你所不知道css世界的absolute
feizhong_web的博客
06-21 274
最近在恶补css的东西，也是和大家分享下position:absolute的巨大用处，先说下大家都很熟的，设置这个属性后，其display计算值就变成block，然后会破坏正常的流特性。现在说一下两个实用性很强的知识点。1.具有相对i特性的无依赖absolute绝对定位一个绝对定位元素，没有设置任何的left/right/top/bottom,而且其祖先元素全部都是非定位元素，其位置会在哪里呢，大...
CSS position属性详解：relative, absolute, fixed
"本文详细解析了CSS中的position属性，包括其基本概念、常见值以及实际应用，旨在帮助初学者理解并掌握这一重要的布局工具。" 在CSS样式中，`position`属性是一个至关重要的属性，用于控制元素在网页布局中的定位...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值