国家企业信用公示官方,seo优化推广专员招聘,网站建设公司的政策风险,网页美工设计教程若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我#xff0c;若你是真心学习可以送你书籍#xff0c;指导你学习#xff0c;给予你目标方向的学习路线#xff0c;无套路#xff0c;博客为证。
一、定位
定位分为相对定位以及绝对定位。
相对定位可以理解为在 HTM…若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我若你是真心学习可以送你书籍指导你学习给予你目标方向的学习路线无套路博客为证。
一、定位
定位分为相对定位以及绝对定位。
相对定位可以理解为在 HTML 中元素会依照原有的顺序进行显示通过相对距离例如左右距离多少的方式使这些元素进行位置的显示。
绝对定位可以理解为在 HTML 中元素并不会按照有序的方式进行排列需要依靠自身给予的定位信息决定元素出现在 HTML 页面中的位置。
1.1 文档流
我们在了解定位前需要了解什么是文档流。
在 HTML 中默认情况下一个网页是多个元素从上而下自动进行排列而成并且是一行一行组成这些行中的元素则是从左往右默认进行排列当元素超过其宽度大小则会进行换行而这就是文档流。 而定位就是指对某个元素显示于在文档流页面中的某个位置又或使某个元素脱离文档流进行显示而在此所属的脱离则是表示某元素不存在于文档流中具体是如何咱们接下来详细说明。
1.2 position 属性
在 HTML 中通过 position 属性对网页中的元素进行定位position 属性支持以下 5 个值
static默认relativeabsolutefixedsticky
在本章开始时了解了相对定位和绝对定位而后又了解了 position 定位的属性值这些值对应了相对定位和绝对定位例如
相对定位的 position 属性值有 relative绝对定位的值有 absolute 、fixed 、sticky
其中使用 static 与 relative 定位元素其元素不会脱离文档流因为是相对定位需要在有序的元素排序中使用相对的定位使其进行排列而使用 absolute 、fixed 、sticky 定位将会使元素脱离文档流。这些元素都使用 left、top、right、bottom 进行定位relative 也使用 left、top、right、bottom 进行定位其作用如下
left距离左侧距离多少top距离顶部距离多少right距离右侧距离多少bottom距离底部距离多少
1.3 relative
position 属性为 relative 时将会根据 left、top、right、bottom 进行定位例如以下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title文档流/titlestylediv{width: 50%;height: 60px;background-color: black;}.relative {width: 300px;top: 10px;position: relative;background-color: aqua;}/style
/head
bodydiv/divdiv classrelative/div
/body
/html以上代码中定义了 div 的默认宽高给予了正常 div 容器的背景色为黑色随后给予了一个类 relative 为 relative 定位使用该类后其定位将会为 relative 在该类中重新定义了宽度为 300px对应的高度则是依旧是整体定义的 div 高度使用了 top 属性表示距离头部距离为 10px并且给予了淡青色为背景颜色在页面中显示如下 我们可以明显的看到淡青色的 div 距离顶部有一定的距离接着咱们在对应的css 中增加 right 属性 此时将会看到在页面中淡青色的元素将会往左侧索入因为在当前 div 右侧无元素但增加了距离右侧的距离那么此时只会往左侧缩入 我们将 right 属性改为 left该元素将会距离左侧有一定的距离 其结果如下 此时我们再将 left 改成 bottom 将会与顶部正常文档流的 div 发生重叠
结果如下 此时我们还需要注意使用 relative 时会出现的一个情况使用 relative 后即时发生了偏移覆盖掉了以上示例情况其他元素其本身所占的位置依旧占据例如如下示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title文档流/titlestylediv{width: 50%;height: 60px;background-color: black;}.relative {width: 300px;bottom: 10px;position: relative;background-color: aqua;}/style
/head
bodydiv/divdiv classrelative/divdiv classrelative styletop: 50px;/divdiv/div/body
/html以上代码中新增了一个 div并且使其距离顶部 50px 此时这个div 将会往下移动覆盖掉下部分的 div但是其本身的位置还是存在我们可以通过示例看出
index-z
在使用绝对定位时若发生了覆盖想使其中一个定位元素现实于另外一个定位元素之上可以使用 z-index 属性该属性可以更改当前页面元素的层级z-index 的属性值为数字数字越大则表示层级越大可以理解层级为覆盖层数0最小表示在最下层数字越大层级越大层架大的数覆盖于小的数此时给该 div 设置 z-index 为 1则会显示在上层z-index 的值默认为0
bodydiv classrelative/divdiv classrelative styletop: 20px;/divdiv classrelative stylebackground-color: red;/div
/body以上代码为 css 样式相同时发生了 div 重叠效果如下 在此时需要第二个 div 不再被红色覆盖可以在样式中添加 z-index 属性 其效果如下
1.4 absolute 绝对定位
绝对定位是脱离文档流而存在的如何脱离咱们可以接下来的示例进行查看。
首先我们需要知道一个点绝对定位的父元素不能是 static 也就是 position不能是 static而 static 是position 的默认值也就是说直咱们需要一个 div 设置为 relative 后再对其进行子元素 设置定位为 absolute
stylediv{width: 50%;height: 160px;background-color: black;}.relative {width: 600px;position: relative;background-color: aqua;}.absolute{width: 300px;height: 60px;position: absolute;background-color: rgb(255, 0, 128);}
/stylebodydiv classrelativediv classabsolute/divdiv classabsolute stylebackground-color: rgb(38, 0, 255);/div/div
/body其页面效果如下 咱们可以看到我们设置了两个 absolute 的 div 元素在页面中只显示了第二个背景色为蓝色的 div 其原因是定位为 absolute 定位将会使其元素脱离文档流此时两个元素是进行了重叠咱们只需要使用 top 这些定位属性使其显示即可 显示效果如下 如何使用 absolute 将会在之后文章进行讲解。
1.5 fixed 固定于窗口的定位
在定位为 fixed 时该div 将会悬浮于整个文档流内容之上例如在浏览一些网页时某些可视区域例如导航、搜索、广告等将会一直固定于页面之上示例如下
stylediv{width: 50%;height: 160px;background-color: black;}.relative {width: 600px;position: relative;background-color: aqua;}.fixed {position: fixed ;width: 100%;height: 10px;top: 20px;background-color:rgb(255, 145, 0);}
/style
bodydivdiv classfixed/div/divdiv classrelativediv classabsolute stylebackground-color: rgb(38, 0, 255);top: 30px;/div/divdiv/divdiv/divdiv/divdiv/divdiv/divdiv/divdiv/divdiv/divdiv/divdiv/divdiv/div
/body此时示例中添加了 fixed 并且为了使页面高度高于可视高度增加了多个div 其效果如下 使用了 fixed 定位后其元素将会固定于页面之上而且不管你是否设置 fixed 在何位置其效果都是一致的例如 在效果演示中还可以看到其 absolute 内容覆盖了 fixed 元素只需要在 fixed 元素中增加 z-index 属性即可。
1.6 sticky 可在文档流中使用
之前使用的 fixed 在文档流中使用并“无效”实现这个效果咱们可以使用 sticky代码示例如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title文档流/titlestylediv{width: 50%;height: 160px;background-color: black;}.sticky {position: sticky ;top: 20px;background-color:rgb(0, 0, 0);width: 100%;height: 60px;}span{display:inline-block;width: 100%;color: aliceblue;text-align: center;height: 60px;line-height: 60px;}/style
/head
bodydiv/divdiv/divdiv styleheight: auto;width: 100%;div classstickyspan这里是 sticky 定位内容——《1_bit 的前端课》/span/divdiv stylebackground-color: rgb(17, 175, 69);width: 100%;/divdiv stylebackground-color: rgb(85, 17, 175);width: 100%;/divdiv stylebackground-color: rgb(175, 17, 101);width: 100%;/divdiv stylebackground-color: rgb(175, 146, 17);width: 100%;/divdiv stylebackground-color: rgb(17, 175, 175);width: 100%;/divdiv stylebackground-color: rgb(190, 219, 23);width: 100%;/divdiv stylebackground-color: rgb(175, 17, 114);width: 100%;/div/div
/body
/html 为了方便显示我 sticky 定位中添加了 span 并且给予了 span 样式在 span 样式中转变了其元素类型 display:inline-block;随后给予了字体颜色白色、text-align: center;、height: 60px;、line-height: 60px;其中 text-align: center;使其内容水平居中显示、height: 60px;设置 span 高度、line-height: 60px;设置其行高行高与高度相同其内容将会水平居中最终效果如下
