`
shuaigg.babysky
  • 浏览: 567740 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

position:relative 的认识

    博客分类:
  • css
 
阅读更多

1.相对定位的元素类似静态定位,其元素保持在正常的文本流中。

2.相对定位元素可以用作绝对定位元素的参考点。

3.相对元素可以接受4种偏移属性的组合方式:top,left,right,bottom。

4.相对定位的元素优先级比静态元素的优先级高,相当于在z轴上的位置比静态元素高。

分享到:
评论

相关推荐

    CSS第6天笔记1

    使用`position`属性并设置为`relative`,就可以启用相对定位。 ### 2.2 不脱标,老家留坑,形影分离 相对定位的一个重要特点是元素不会脱离常规文档流,也就是说,它仍然占据原来的位置,其他元素不会因它的定位而...

    CSS之Position全面认识

    本文将深入探讨`position`的四个主要属性值:`relative`、`absolute`、`fixed`和`static`,帮助新手朋友们更好地理解和掌握CSS定位。 1. `relative`(相对定位) 相对定位是最基础的定位方式,它保持元素在正常文档...

    CSS学习之CSS网页制作的10个技巧

    学习ccs和制作网站当中遇到的一些疑问,整理的一些笔记. 1.marquee 滚动样式是IE独有的,FF不... a:hover { position:relative; top:1px; left:1px} 5.禁止内容换行与强制内容换行 在表格或层中我们可能希望内容不换

    2017年前端面试题整理汇总100题.pdf

    - `position: relative;` 相对定位,是相对于其正常位置进行定位的。 - `position: absolute;` 绝对定位,是相对于最近一个已定位的父元素定位的,如果没有则相对于初始化文档(html元素)。 - `position: fixed;` ...

    精心制作的CSS模板

    4. **定位**:相对定位(`position: relative`)、绝对定位(`position: absolute`)和固定定位(`position: fixed`)是CSS中的定位机制,它们能精确控制元素在页面上的位置。在修改模板时,合理使用定位可以帮助...

    使用DivCSS布局网页PPT学习教案.pptx

    - **相对定位**:元素相对于其正常位置定位,使用`position:relative;`,可通过`top`、`right`、`bottom`、`left`进行微调。 - **浮动定位**:通过`float`属性实现,可以是`none`(不浮动)、`left`(向左浮动)或...

    jquery全屏左右切换图片焦点图代码

    position: relative; } #fullscreen-slider img { width: 100%; height: auto; position: absolute; top: 0; left: 0; opacity: 0; } #fullscreen-slider img:first-child { opacity: 1; } ``` 四、...

    网页特效代码文字特效自动向上滚动的文本鼠标放上去就停止

    position: relative; animation: scroll-up infinite linear; } @keyframes scroll-up { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } /* 文字的高度决定滚动的距离 */ } ``` ...

    jquery实现图片左右滚动

    position: relative; width: 100%; } #slider img { width: 100%; position: absolute; } ``` ```javascript $(document).ready(function() { var sliderWidth = $('#slider').width(); var currentIndex = 0...

    前端面试题大集合

    - z-index问题:给父级添加`position: relative`。 - PNG透明问题:使用JavaScript或CSS hack解决。 - 最小高度问题:使用`!important`。 - Select在IE6下的遮盖问题:使用iframe嵌套。 - 宽度容器问题:使用`...

    css和javascript初步认识教程

    - 定位布局(Positioning):`position`属性,如`static`、`relative`、`absolute`和`fixed`,用于精确控制元素位置。 4. **CSS3新特性** - 伪类与伪元素:如`:hover`、`:active`、`:focus`等,用于在不同状态...

    前端面试题

    - **z-index问题**:给父元素添加`position:relative`。 - **PNG透明问题**:使用JavaScript插件解决。 - **min-height问题**:使用`!important`来覆盖默认样式。 - **select元素遮盖问题**:使用`iframe`嵌套来...

    微信小程序实现跑马灯效果

    1. 微信小程序的页面布局和样式设计,使用了flex布局(position: relative和position: absolute)来实现跑马灯区域内的文字定位。 2. 计算文字宽度的正确方法。在实际开发中,简单的字符数*文字size的计算方式可能...

    html面试题.docx

    position: relative; height: 0; } .line::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; border-bottom: 0.5px solid #000; transform: translateY(-50%); } ``` 26. ...

    CSS 布局一个漂亮的滑块

    4. 精确的定位:使用`position:relative`来控制元素的位置关系,`right`和`top`属性用于微调元素的具体位置,例如`dddivstrong`标签使用绝对定位来精确放置在滑块的右上角位置。 5. CSS选择器的使用:通过`* htmldd...

    前端面试汇总

    WEB标准及W3C的认识** - **WEB标准**: 一组指导原则和技术规范,确保网页的互操作性和可访问性。 - **W3C**: World Wide Web Consortium,负责制定和推广WEB标准。 **40. 前端页面的构成** - **结构层**: HTML...

    HTML+CSS+JS环境保护网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

    - 主题意义: 提升公众对环境保护的认识,鼓励采取行动保护地球。 - 设计要点: 使用自然元素和清新的颜色搭配,传达和谐与可持续发展的理念。 - 功能特点: 包括环保知识介绍、互动问答、志愿者活动报名等模块。 -...

    jquery和css3实现的炫酷时尚的菜单导航

    `)和相对定位(`position: relative;`),可以精细地控制元素在页面上的具体位置。`#corp_page`和`.menu`通过这些定位属性,实现了内容页面和菜单项的相对移动。 ### 知识点二:jQuery在菜单导航中的应用 1. **...

Global site tag (gtag.js) - Google Analytics