【代码笔记】Web-CSS-CSS Positioning（css代码案例）

25-03-20 7

此处将为大家介绍关于【代码笔记】Web-CSS-CSSPositioning的详细内容，并且为您解答有关css代码案例的相关问题，此外，我们还将为您介绍关于CSSPosition定位_html/css

此处将为大家介绍关于【代码笔记】Web-CSS-CSS Positioning的详细内容，并且为您解答有关css代码案例的相关问题，此外，我们还将为您介绍关于CSS Position 定位_html/css_WEB-ITnose、css position 问题_html/css_WEB-ITnose、css-position_html/css_WEB-ITnose、CSS学习笔记--定位position属性的学习_html/css_WEB-ITnose的有用信息。

本文目录一览：

【代码笔记】Web-CSS-CSS Positioning（css代码案例）
CSS Position 定位_html/css_WEB-ITnose
css position 问题_html/css_WEB-ITnose
css-position_html/css_WEB-ITnose
CSS学习笔记--定位position属性的学习_html/css_WEB-ITnose

【代码笔记】Web-CSS-CSS Positioning（css代码案例）

一，效果图。

二，代码。

<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>CSS Positioning</title> <style> p.pos_fixed { position: fixed; top: 30px; right: 5px; } h2.pos_left { position: relative; left: -20px; } h2.pos_right { position: relative; left: 20px; } h2.pos_top { position: relative; top: -50px; } h2.absolute { position: absolute; left: 100px; top: 150px; } img { position: absolute; left: 0px; top: 0px; z-index: -1; } </style> </head> <body> <p class="pos_fixed">Some more text</p> <p><b>Note:</b> IE7 and IE8 supports the fixed value only if a !DOCTYPE is specified.</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> <h2>This is a heading with no position</h2> <h2 class="pos_left">This heading is moved left according to its normal position</h2> <h2 class="pos_right">This heading is moved right according to its normal position</h2> <p>Relative positioning moves an element RELATIVE to its original position.</p> <p>The style "left:-20px" subtracts 20 pixels from the element''s original left position.</p> <p>The style "left:20px" adds 20 pixels to the element''s original left position.</p> <h2>This is a heading with no position</h2> <h2 class="pos_top">This heading is moved upwards according to its normal position</h2> <p><b>Note:</b> Even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow.</p> <h2 class="absolute">This is a heading with an absolute position</h2> <p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p> <h1>This is a heading</h1> <img src="w3css.gif" width="100" height="140" /> <p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p> </body> </html>

参考资料：《菜鸟教程》

CSS Position 定位_html/css_WEB-ITnose

Position(定位)

css定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法.

有四种不同的定位方法。

Static 定位
Fixed 定位
Relative 定位
Absolute 定位

Static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到top, bottom, left, right影响。

立即学习“前端免费学习笔记（深入）”；

Fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

p.pos_fixed{    position:fixed;    top:30px;    right:5px;}

登录后复制

在线运行

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持.

Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠。

Relative 定位

相对定位元素的定位是相对其正常位置。

h2.pos_left{    position:relative;    left:-20px;}h2.pos_right{    position:relative;    left:20px;}

登录后复制

在线运行

可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。

h2.pos_top{    position:relative;    top:-50px;}

登录后复制

在线运行

相对定位元素经常被用来作为绝对定位元素的容器块。

Absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

h2{    position:absolute;    left:100px;    top:150px;}

登录后复制

在线运行

Absolutely定位使元素的位置与文档流无关，因此不占据空间。

Absolutely定位的元素和其他元素重叠。

重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

img{    position:absolute;    left:0px;    top:0px;    z-index:-1;}

登录后复制

在线运行

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

所有的CSS定位属性

"CSS" 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。

属性说明值 CSS

bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。	auto length % inherit	2
clip	剪辑一个绝对定位的元素	shape auto inherit	2
cursor	显示光标移动到指定的类型	url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help	2
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。	auto length % inherit	2
overflow	设置当元素的内容溢出其区域时发生的事情。	auto hidden scroll visible inherit	2
position	指定元素的定位类型	absolute fixed relative static inherit	2
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。	auto length % inherit	2
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。	auto length % inherit	2
z-index	设置元素的堆叠顺序	number auto inherit	2

回复讨论(解决方案)

.a{overflow:hidden}

.a{overflow:hidden}
++

css-position_html/css_WEB-ITnose

值描述

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。(简单情况下相对于浏览器窗口)
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。立即学习“前端免费学习笔记（深入）”；因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

button1

CSS学习笔记--定位position属性的学习_html/css_WEB-ITnose

今天学习之前剩下的一个问题：css的position属性。首先归纳出和position相关的问题：

position作为一个属性，它一共有哪几个属性值？
position常用的属性值有哪几个？分别有什么特点？

第一个问题：position作为一个属性，它一共有哪几个属性值？

对于position属性，他一共有5个值，分别是

static：默认值。没有定位，元素出现在正常的流中。
relative：生成相对定位的元素，相对于其正常位置进行定位。正常位置也就是指如果没有position属性它会出现的位置。
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。这里需要注意一下，absolute的参照对象是第一个拥有非static的position属性的父级元素，后面会详细解释。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
规定应该从父元素继承 position 属性的值。

这种定义性质的问题，一般在W3cSchool上可以找到最标准的的答案，这5种属性的解释已经非常详细。其实我们在开发中经常用的只有relative、absolute、fixed这3个属性，另外当给元素增加了这是种属性中的任意一种，我们也就需要根据情况设置元素的left/top/right/bottom以及z-index，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定，显示层级通过z-index控制。

第二个问题：position常用的属性值有哪几个？分别有什么特点？

上面已经提到了我们常用的3个属性值： relative、absolute、fixed。

立即学习“前端免费学习笔记（深入）”；

relative：元素的position属性设置为relative后，这个元素会 以自己之前的位置为参照，根据设置的left等值进行移动。下面举个栗子~

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ width: 100px; height: 100px; background-color: #0044aa; margin: 5px; } #div2{ width: 100px; height: 100px; background-color: #e13b00; margin: 5px; position: relative; left: 50px; top:50px; z-index: -2; } #div3{ width: 100px; height: 100px; background-color: yellow; margin: 5px; } </style></head><body> <div> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </div></body></html>

登录后复制

代码的效果如下图：

第二个div是根据它之前的位置进行了移动， 并且它之前的位置并没有被后面的元素占据。红色的div被黄色的div遮盖是因为z-index的作用。

absolute：对于position属性是 static 定位以外的第一个父元素进行定位。这里需要详细分析一下这句话：首先我们可以判断出，absolute定位参照的对象是它拥有定位属性的父级元素；然后，这个父级元素的position属性不能是static。

这里再想细一点：如果元素没有拥有position属性的父级元素怎么办？这里我通过查资料确定了这种情况它会根据标签也就是页面的根节点进行定位。（注意是标签）

下面将div2的position属性改为absolute查看效果：

这样我们就可以发现红色div移动之前的位置会被黄色的占据， 这时候其实表示红色的div已经脱离了文档流。

最后一个属性值：fixed.它的效果其实和absolute类似，都属于绝对定位， 但是它的参照则是固定的浏览器窗口。修改div2的position属性改为fixed后，滚动鼠标滚轴就可以查看效果，利用这个特性我们可以做出类似侧边悬浮窗（某些网站侧边的小广告(ノಠ益ಠ)ノ彡┻━┻）这样的效果。

其实，我在学习position过程中感觉到，掌握好元素的参照物是理解position属性的关键，确定好参照物，然后再根据属性值的类型判断后面的元素的状态，就能确定好元素的位置啦~

PS：通过这几天自己提问自己想办法解答的学习过程，真的收获很多。其实平时学习过程中忽略的细节还是很多的，经历了这样的一个过程自己的基础知识又扎实了不少~另外我还发现利用博客来分享知识更是个快乐的过程，又能提高编程技术又能提高表达能力，同时还有可能帮助到别人，所以一定要坚持下去！！(╰_╯)#

2016年1月11日

不积跬步，无以至千里

我们今天的关于【代码笔记】Web-CSS-CSS Positioning和css代码案例的分享已经告一段落，感谢您的关注，如果您想了解更多关于CSS Position 定位_html/css_WEB-ITnose、css position 问题_html/css_WEB-ITnose、css-position_html/css_WEB-ITnose、CSS学习笔记--定位position属性的学习_html/css_WEB-ITnose的相关信息，请在本站查询。

本文标签：