CSS之定位（包括相对定位、绝对定位、浮动）

最新推荐文章于 2024-05-09 21:18:28 发布

web菜鸟程序猿

最新推荐文章于 2024-05-09 21:18:28 发布

阅读量688

点赞数

分类专栏： CSS 文章标签： CSS HTML

本文链接：https://blog.csdn.net/zhou0107/article/details/9145943

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Css定位</title>
	<style type="text/css">
		/*CSS position属性
		*static  元素框正常生成
		*relative(相对定位) 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。移动元素会导致它覆盖其它框。
		*absolute(绝对定位) 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
		*fixed(固定定位) 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身
		**/
		/*CSS top(right、bottom、left)定义一个定位元素上(右、下、左)外边距边界与其包含块上(右、下、左)边界之间的偏移
		*/
		img{
			position:absolute;
			top:1px;
			right:2px;
			bottom:1px;
			left:12px;
		}
		/*overflow 定义当元素的内容溢出其区域时发生的事情
		*visible：默认值，内容不会被修剪，会呈现在元素框之外
		*hidden：内容会被修剪，并且其余内容不可见
		*scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
		*auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
		*inherit：规定应该从父元素继承 overflow 属性的值。
		*/
		.scroll 
		{
			background-color:#00FFFF;
			width:150px;
			height:150px;
			overflow: scroll
		}
		.hidden{
			background-color:#00FFFF;
			width:150px;
			height:150px;
			overflow: hidden
		}
		.auto{
			background-color:#00FFFF;
			width:150px;
			height:150px;
			overflow: auto
		}
		/*z-index属性 设置元素的堆叠顺序
		*注意：Z-index只能在定位元素上凑效，如：position：absolute;该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
		*auto：堆叠顺序与父元素相等
		*number：设置元素的堆叠顺序
		*/
		.x
		{
		position:absolute;
		left:0px;
		top:760px;
		z-index:-1
		}
		.y{
			position:absolute;
			top:860px;
			left:0px;
			z-index:1px;
		}
	</style>
</head>
<body>
	<div>
		CSS定位
		<img src="http://www.w3school.com.cn/i/eg_smile.gif" alt="" />
	</div>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

	<div class="scroll">
		这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
	</div>
	<br />
	<br />
	<div class="hidden">
		这个属性定义溢出元素内容区的内容会如何处理。如果值为 hidden，内容会被修剪，并且其余内容不可见。内容会被修剪，并且其余内容不可见。内容会被修剪，并且其余内容不可见。默认值是 visible。
	</div>
	<br />
	<br />
	<div class="auto">
		这个属性定义溢出元素内容区的内容会如何处理。如果值为auto，如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。默认值是 visible。
	</div>
	<br />
	<br />
	<div>
		<h1>这是一个标题</h1>
		<img class="x" src="http://www.w3school.com.cn/i/eg_mouse.jpg" />
		<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
	</div>
	<br />
	<div>
		<h1>这是一个标题</h1>
		<img class="y" src="http://www.w3school.com.cn/i/eg_mouse.jpg" />
		<p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>
	</div>
</body>
</html>

web菜鸟程序猿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS之定位（包括相对定位、绝对定位、浮动）

Css定位 /*CSS position属性 *static 元素框正常生成 *relative(相对定位) 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。移动元素会导致它覆盖其它框。 *absolute(绝对定位) 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，
复制链接

扫一扫

专栏目录