网站建筑设计,响应式网站开发软件,信息流广告的特点,做商演任务的网站CSS笔记05
定位
position
CSS 属性position - 用于指定一个元素在文档中的定位方式。top#xff0c;right#xff0c;bottom 和 left 属性则决定了该元素的最终位置。position 有以下常用的属性值#xff1a; position: static; - 默认值。指定元素使用正常的布局行为rightbottom 和 left 属性则决定了该元素的最终位置。position 有以下常用的属性值 position: static; - 默认值。指定元素使用正常的布局行为即元素在标准文档流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。position: relative; - 相对定位元素先放置在默认的static位置再在不改变页面布局的前提下调整元素位置。相对定位的元素不会被移出标准文档流且元素原先在标准文档流中所占的空间会被保留。position: absolute; - 绝对定位通过指定元素相对于最近的非static定位祖先元素的偏移来确定元素位置如果元素没有非static定位的祖先元素绝对定位元素会相对于初始块容器的位置进行偏移。初始块容器是一个有着和浏览器视口一样的尺寸的矩形它包含根元素html。元素绝对定位后会重新生成一个块级框而不论原来它在正常文档流中生成何种类型的框。绝对定位的元素会被移出标准文档流且元素原先在标准文档流中所占的空间不会被保留。position: fixed; - 固定定位通过指定元素相对于浏览器视口viewport本身的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。 元素固定定位后也会重新生成一个块级框而不论原来它在正常文档流中生成何种类型的框。固定定位的元素也会被移出标准文档流且元素原先在标准文档流中所占的空间不会被保留。 补充 - 视口viewport在电脑图形学里面视口代表了一个可看见的多边形区域通常来说是矩形。在浏览器范畴里它代表的是浏览器中网站可见内容的部分。视口外的内容在被滚动进来前都是不可见的。下面我们就来详细演示一下这几种定位方式
静态定位默认定位 - static position: static; - 默认值。指定元素使用正常的布局行为即元素在标准文档流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。 首先我们设计一个页面它由一个父级div和三个子级div组成我们不手动设置position属性即此时的position属性为其默认值position: static;
!DOCTYPE html
html langen
headmeta charsetUTF-8title默认位置/titlestylebody {padding: 20px;}div {margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father {border: 2px solid black;}#first {background-color: yellow;border: 2px dashed orange;}#second {background-color: deepskyblue;border: 2px dashed blue;}#third {background-color: lawngreen;border: 2px dashed green;}/style/head
bodydiv idfatherdiv idfirst第一个盒子/divdiv idsecond第二个盒子/divdiv idthird第三个盒子/div
/div/body
/html我们查看默认情况下的网页效果 相对定位 - relative position: relative; - 相对定位元素先放置在默认的static位置再在不改变页面布局的前提下调整元素位置。相对定位的元素不会脱离标准文档流且元素原先在标准文档流中所占的空间会被保留。因此left: 20px; 会向元素的左外边距边界与其包含块左边界之间添加 20 像素的偏移量其显示效果便是元素相比于默认位置向右移了 20 像素在左侧留下了 20 像素的空白。 我们使用position: relative;将上面默认定位网页中的第一个和第三个div设置为相对定位并使用toprightbottom 和 left 属性来改变它们的位置
!DOCTYPE html
html langen
headmeta charsetUTF-8title相对定位/titlestylebody {padding: 20px;}div {margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father {border: 2px solid black;}#first {background-color: yellow;border: 2px dashed orange;position: relative; /* 设置定位方式为相对定位 */left: 20px;top: -20px;}#second {background-color: deepskyblue;border: 2px dashed blue;}#third {background-color: lawngreen;border: 2px dashed green;position: relative; /* 设置定位方式为相对定位 */right: 20px;bottom: -20px;}/style/head
bodydiv idfatherdiv idfirst第一个盒子/divdiv idsecond第二个盒子/divdiv idthird第三个盒子/div
/div/body
/html查看使用相对定位改变元素位置后的网页效果 练习 使用div和超链接a布局页面每个超链接宽度和高度都为100px背景颜色为粉色当鼠标指针移上去时变为蓝色使用相对定位改变各个超链接的位置 代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle#box {width: 300px;height: 300px;border: 2px solid red;margin: 0 auto;padding: 10px;}a {width: 100px;height: 100px;display: block;background-color: pink;line-height: 100px;font-size: 15px;color: white;text-align: center;text-decoration: none;}a:hover {background-color: blue;}#second, #fourth {position: relative;left: 200px;top: -100px;}#fifth {position: relative;left: 100px;top: -300px;}/style/head
bodydiv idboxa idfirst href#链接1/aa idsecond href#链接2/aa idthird href#链接3/aa idfourth href#链接4/aa idfifth href#链接5/a
/div/body
/html查看网页效果 绝对定位 - absolute
position: absolute; - 绝对定位通过指定元素相对于最近的非static定位祖先元素的偏移来确定元素位置如果元素没有非static定位的祖先元素绝对定位元素会相对于初始块容器的位置进行偏移。初始块容器是一个有着和浏览器视口一样的尺寸的矩形它包含根元素html。元素绝对定位后会重新生成一个块级框而不论原来它在正常文档流中生成何种类型的框。绝对定位的元素会被移出标准文档流且元素原先在标准文档流中所占的空间不会被保留。首先我们来测试一下在没有设置非static定位的祖先元素时使用绝对定位改变元素第二个子div的位置
!DOCTYPE html
html langen
headmeta charsetUTF-8title绝对定位/titlestylebody {padding: 20px;}div {margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father {border: 2px solid black;}#first {background-color: yellow;border: 2px dashed orange;}#second {background-color: deepskyblue;border: 2px dashed blue;position: absolute;left: 10px;top: 20px;}#third {background-color: lawngreen;border: 2px dashed green;}/style/head
bodydiv idfatherdiv idfirst第一个盒子/divdiv idsecond第二个盒子/divdiv idthird第三个盒子/div
/div/body
/html查看使用相对定位改变元素位置后的网页效果 分析 接着我们再来测试一下在设置了非static定位的祖先元素后使用绝对定位改变元素第二个子div的位置将第二个子div的父级元素father设置为相对定位 -relative通常我们都习惯将使用绝对定位的元素的父级元素设置为相对定位 - “ 子绝父相 ”
!DOCTYPE html
html langen
headmeta charsetUTF-8title绝对定位/titlestylebody {padding: 20px;}div {margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}/* 设置父级元素为非static定位 */#father {border: 2px solid black;position: relative;}#first {background-color: yellow;border: 2px dashed orange;}#second {background-color: deepskyblue;border: 2px dashed blue;position: absolute;left: 10px;top: 20px;}#third {background-color: lawngreen;border: 2px dashed green;}/style/head
bodydiv idfatherdiv idfirst第一个盒子/divdiv idsecond第二个盒子/divdiv idthird第三个盒子/div
/div/body
/html查看使用绝对定位改变元素位置后的网页效果 分析 固定定位 - fixed position: fixed; - 固定定位通过指定元素相对于浏览器视口viewport本身的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。 元素固定定位后也会重新生成一个块级框而不论原来它在正常文档流中生成何种类型的框。固定定位的元素也会被移出标准文档流且元素原先在标准文档流中所占的空间不会被保留。 下面我们重新写一个例子在网页中定义两个div第一个div使用绝对定位移动到初始块容器的右下角第二个div使用固定定位移动到浏览器视口的右下角
!DOCTYPE html
html langen
headmeta charsetUTF-8title固定定位/titlestylebody {height: 1000px;}/* 绝对定位相对于初始包含块(和浏览器视口大小相等的一个矩形) */div:nth-of-type(1) {width: 200px;height: 200px;background-color: red;position: absolute;right: 0;bottom: 0;}/* 固定定位相对于浏览器视口本身 */div:nth-of-type(2) {width: 100px;height: 100px;background-color: blue;position: fixed;right: 0;bottom: 0;}/style/head
bodydiv绝对定位div/div
div固定定位div/div/body
/html查看网页效果 可以看到此时两个div都移动到了右下角。那么它们的区别在哪里呢下面我们滑动浏览器侧边的滚动条 我们可以发现使用绝对定位的div的位置会随着屏幕滚动而变化而使用固定定位的div的位置则不会随着屏幕滚动而变化始终在当前浏览器视口的右下角。
z-index 与 不透明度
首先我们来理解一下什么是图层 CSS 属性z-index指定一个元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上层。演示首先我们写一个 HTML 页面
index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefcss/style.css
/head
bodydiv classcontentulliimg srcimages/bg.png altbg.png/lili classtipText快来领养猫咪吧/lili classtipBg/liliXX宠物救助中心/li/ul
/div/body
/html它的页面效果是这样的 我们给它添加一些样式
style.css
#content {width: 460px;margin: 0;padding: 0;overflow-block: hidden;font-size: 12px;line-height: 25px;border: 1px solid black;
}ul, li {margin: 0;padding: 0;list-style: none;
}/* 设置父级元素相对定位(子绝父相) */
#content {position: relative;
}/* 绝对定位 */
.tipText, .tipBg {width: 460px;height: 25px;position: absolute;top: 285px;
}.tipText {color: white;
}.tipBg {background-color: black;
}此时的页面效果如下 我们发现我们的提示背景tipBg覆盖住了我们的提示文字tipText导致我们看不到我们的提示文字。我们现在给提示文字tipText设置堆叠顺序让它的堆叠顺序更高
style.css
#content {width: 460px;margin: 0;padding: 0;overflow-block: hidden;font-size: 12px;line-height: 25px;border: 1px solid black;
}ul, li {margin: 0;padding: 0;list-style: none;
}#content {position: relative;
}.tipText, .tipBg {width: 460px;height: 25px;position: absolute;top: 285px;
}/* z-index - 设置元素的堆叠顺序 */
.tipText {color: white;z-index: 99;
}.tipBg {background-color: black;
}此时的页面效果如下 补充为了让页面更美观我们还可以使用opacity属性设置元素的不透明度
#content {width: 460px;margin: 0;padding: 0;overflow-block: hidden;font-size: 12px;line-height: 25px;border: 1px solid black;
}ul, li {margin: 0;padding: 0;list-style: none;
}#content {position: relative;
}.tipText, .tipBg {width: 460px;height: 25px;position: absolute;top: 285px;
}.tipText {color: white;z-index: 99;
}/* opacity - 设置元素的不透明度(0.0 ~ 1.0) */
.tipBg {background-color: black;opacity: 0.5;/* filter: alpha(opacity50); - IE8以及更早版本支持使用filter设置元素的不透明度 */
}此时的页面效果如下
