189 8069 5689

css定位布局的概念是什么

这篇文章主要介绍“css定位布局的概念是什么”,在日常操作中,相信很多人在css定位布局的概念是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css定位布局的概念是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

站在用户的角度思考问题,与客户深入沟通,找到邵武网站设计与邵武网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站制作、网站设计、企业官网、英文网站、手机端网站、网站推广、空间域名、网页空间、企业邮箱。业务覆盖邵武地区。

css中定位布局指的是元素可以脱离原来的位置,定位到页面中任意位置的方式;定位布局可以分为静态定位(static)、绝对定位(absolute)、相对定位(relative)、固定定位(fixed)和粘性定位(sticky)五种定位方式。

本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

css定位布局是什么意思

CSS布 局之定位布局 定位布局(Position)指元素可以脱离原来的位置,定位到页面中的任意位置。

使用 position、left、right、top、bottom,可以改变元素现有位置,譬如让元素从正常布局流中跳出来,固定在页面某个位置上。

css中的定位布局,分为静态(static),相对(relative),绝对(absolute),固定(fixed),粘滞(sticky)布局

一、position: static;(静态布局)

HTML元素默认的定位是静态,默认定位在文档流中,设置position: static;样式的元素不会受到left,right,bottom,top的影响。它不会因为任何特殊的定位方法而改变其在正常流中的位置

示例如下:





123



position: static;

使用 position: static; 定位的元素,无特殊定位,遵循正常的文档流对象:

该元素使用了 position: static;

输出结果:

css定位布局的概念是什么

二、position: relative;(相对定位)

相对定位是元素相对于其在原来标准流中位置进行移动,通过left,right,bottom,top属性进行调整

注意点:

使用场景:

示例如下:




 
123 



这是位于正常位置的标题

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

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

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

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

输出结果:

css定位布局的概念是什么

三、position: absolute;(绝对定位)

绝对定位的参考点

注意点

示例如下:




 
123 



这是一个绝对定位了的标题

用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.

输出结果:

css定位布局的概念是什么

四、position: fixed;(固定定位)

设置了固定定位的元素是相对于视口定位的,也就是说其不会随着滚动条的滚动而滚动,他始终处于以一个视口的位置,通过left,right,bottom,top属性调整其位置

注意点

示例如下:




 
123 



Some more text

注意: IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

输出结果:

css定位布局的概念是什么

五、position: sticky;(粘滞定位)

此定位结合了相对定位和固定定位,通过相对定位定位到某一位置,当视口到达此位置时,将其固定住,例如:设置top:50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动(此时相当于fixed定位)。

注意点

使用条件

示例如下:




 
123 



尝试滚动页面。

注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。

我是粘性定位!
  

滚动我

  

来回滚动我

  

滚动我

  

来回滚动我

  

滚动我

  

来回滚动我

输出结果:

css定位布局的概念是什么

到此,关于“css定位布局的概念是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


本文名称:css定位布局的概念是什么
文章起源:http://cdxtjz.com/article/ihschc.html

其他资讯