CSS 定位

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lengyuezuixue/article/details/81479069

元素相对浏览器窗口的位置

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style type="text/css">
			p.pos_fixed {
				position:fixed;
				top:30px;
				right:5px;
			}
		</style>
	</head>
	<body>
		<p class="pos_fixed">Some more text</p>
		<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</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>
	</body>
</html>

元素的相对定位

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style type="text/css">
			h2.pos_left {
				position:relative;
				left:-20px;
			}
			
			h2.pos_right {
				position:relative;
				left:20px;
			}
			
			
		</style>
	</head>
	<body>
		<h2>这是位于正常位置的标题</h2>
		<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
		<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
		<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
		<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
		<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
	</body>
</html>

元素的绝对位置

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style type="text/css">
			h2 {
				position:absolute;
				left:100px;
				top:150px;
			}
			
		</style>
	</head>
	<body>
		<h2>这是一个绝对定位了的标题</h2>
		<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
	</body>
</html>

重叠的元素

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			img {
				position:absolute;
				left:0px;
				top:0px;
				z-index:-1;
			}
		</style>
	</head>
	<body>
		<h1>This is a heading</h1>
		<img src="w3css.gif" width="100" height="140" />
		<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
	</body>
</html>

设置元素的形状

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			img {
				position:absolute;
				clip:rect(0px,60px,200px,0px);
			}
		</style>
	</head>
	<body>
		<img src="w3css.gif" width="100" height="140" />
	</body>
</html>

如何使用滚动条来显示元素內溢的内容

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			div.scroll {
				background-color:#00FFFF;
				width:100px;
				height:100px;
				overflow:scroll;
			}
			
			div.hidden {
				background-color:#00FF00;
				width:100px;
				height:100px;
				overflow:hidden;
			}
		</style>
	</head>
	<body>
		<p>overflow 属性规定当内容溢出元素框时发生的事情。.</p>

		<p>overflow:scroll</p>
		<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

		<p>overflow:hidden</p>
		<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
	</body>
</html>

如何设置浏览器自动溢出处理

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			div {
				background-color:#00FFFF;
				width:150px;
				height:150px;
				overflow:auto;
			}
			
			
		</style>
	</head>
	<body>
		<p>overflow 属性规定当内容溢出元素框时发生的事情。</p>

		<div>
		当你想更好的控制布局时你可以使用 overflow 属性。尝试修改 overflow 属性为: visible, hidden, scroll, 或 inherit 并查看效果。 默认值为 visible。
		</div>
	</body>
</html>

使用像素值设置图像的顶部

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			img {
				position:absolute;
				top:0px;
			}
			
			
		</style>
	</head>
	<body>
		<img src="logocss.gif" width="95" height="84">
		<h1>This is a heading</h1>
	</body>
</html>

使用像素值设置图像的底部

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			img.ex1 {
				position:absolute;
				bottom:0px;
			}
			
			img.ex2 {
				position:relative;
				bottom:-100px;
			}
			
			
		</style>
	</head>
	<body>
		<img class="ex1" src="logocss.gif"  width="95" height="84">
		<h1>This is a heading</h1>
		<img class="ex2" src="logocss.gif"  width="95" height="84">
	</body>
</html>

使用像素值设置图像的左边

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			img {
				position:absolute;
				left:50px;
			}
			
			
			
			
		</style>
	</head>
	<body>
		<h1>This is a heading</h1>
		<img src="logocss.gif" width="95" height="84">
	</body>
</html>

使用像素值设置图像的右边

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			img {
				position:absolute;
				right:50px;
			}
			
		</style>
	</head>
	<body>
		<h1>This is a heading</h1>
		<img src="logocss.gif" width="95" height="84">
	</body>
</html>

更改光标

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
		
		</style>
	</head>
	<body>
		<p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p>
		<span style="cursor:auto">auto</span><br>
		<span style="cursor:crosshair">crosshair</span><br>
		<span style="cursor:default">default</span><br>
		<span style="cursor:e-resize">e-resize</span><br>
		<span style="cursor:help">help</span><br>
		<span style="cursor:move">move</span><br>
		<span style="cursor:n-resize">n-resize</span><br>
		<span style="cursor:ne-resize">ne-resize</span><br>
		<span style="cursor:nw-resize">nw-resize</span><br>
		<span style="cursor:pointer">pointer</span><br>
		<span style="cursor:progress">progress</span><br>
		<span style="cursor:s-resize">s-resize</span><br>
		<span style="cursor:se-resize">se-resize</span><br>
		<span style="cursor:sw-resize">sw-resize</span><br>
		<span style="cursor:text">text</span><br>
		<span style="cursor:w-resize">w-resize</span><br>
		<span style="cursor:wait">wait</span><br>
	</body>
</html>

 

参考:

https://www.yuque.com/docs/share/1b44b53b-0005-4eba-a3da-1a1115b6182f

 

展开阅读全文

没有更多推荐了,返回首页