0

0

CSSPosition定位

php中文网

php中文网

发布时间:2016-09-08 08:29:15

|

2477人浏览过

|

来源于php中文网

原创

  position这个属性定义建立元素布局所用的定位机制。任何元素都是可以进行定位的,不过绝对或者固定一个元素会产生一个块级框,不论该元素是什么类型;相对定位元素会相对于它在正常文档流中的默认位置偏移。

  Position元素一般来说拥有五个属性,分别有:

  1.absolute(生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过top、left、right、bottom进行设置。)

  2.fixed(生成绝对定位的元素,与absolute不同,fixed是相对于浏览器窗口进行定位。元素的位置设置方式与absolute相同。)

  3.relative(生成相对定位的元素,相对于浏览器的窗口进行定位。因此,"left:20px;"会向元素的左方位置添加20个像素。)

立即学习前端免费学习笔记(深入)”;

  4.static(position元素的默认值,没有定位,故此元素会出现在正常的文档流中)

  5.inherit(设定应该从父元素继承position属性的值。)

下面我们针对各种属性列出一些实例代码:

  1.absolute属性

    
      

Lessie AI
Lessie AI

一款定位为「People Search AI Agent」的AI搜索智能体

下载

        
      

      


        

这是带有绝对定位的标题


        

通过绝对定位,元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px,距离页面顶部 150px。


      

    

  2.relative属性() 

    
      


        
      

      


        

这是位于正常位置的标题


        

这个标题相对于其正常位置向左移动


        

这个标题相对于其正常位置向右移动


        

相对定位会按照元素的原始位置对该元素进行移动。


        

样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。


        

样式 "left:20px" 向元素的原始左侧位置增加 20 像素。


      

    

  3.fixed属性   

    
      


        
      
      

        

一些文本。


        

更多的文本。

      
    

 

  在进行元素定位时,如果两个元素之间发生冲突,可以使用z-index属性为元素设置优先级,z-index可被用于将一个元素放置于另一个元素之后,默认值为0,假设两个元素A和B,A的z-index属性默认为0,而将B的z-index属性设为-1,那么,B元素的优先级就低于A元素。

  那么什么是绝对定位、什么又是相对定位呢?

  1.绝对定位:元素位置会根据浏览器页面左上角进行定位,并使该元素脱离文档流,并且不占据空间。普通文档流中的元素布局就像绝对定位的元素不存在一样。简而言之,使定位元素脱离文档流和浮动模型,独立于其他对象二存在,没有占位。

  2.相对定位:如果对一个元素进行相对定位,首先它将出现在它所出现的位置上,然后通过垂直或者水平位置,让这个元素“相对于”它的原始起点进行移动。相对定位不会使元素脱离文档流,被设置元素相对于其原始定位进行进一步定位,其原始占位信息仍然存在。

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

7

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

7

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

1

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

1

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

16

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

18

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号