CSS ????
CSS ?? ??
CSS ?? ?? ??? ???? ??? ??? ????? ? ????. ?? ? ??? ?? ?? ?? ???? ? ??? ???? ?? ? ?? ??? ??? ??? ? ????.
??? ??, ???, ?? ? ??? ??? ???? ??? ??? ? ????. ??? ?? ??? ?? ???? ??? ??? ??? ???? ????. ?? ?? ??? ?? ?? ??? ????.
?? ?? ???? ? ??? ????.
?? ?? ??
HTML ??? ???, ? ?? ??? ??? ??? ?? ???? ?????.
???? ??? ??? ??, ???, ??, ???? ??? ?? ????.
?? ??
??? ??? ???? ?? ???? ?????.
?? ????? ???? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
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>php中文網(wǎng)(php.cn)</title>
<style>
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<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>
</body>
</html>????? ???? ??? ???
????? ??? ??? ?? ??? ??? ??? ??? ? ??? ?? ???? ??? ???? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
h2.pos_top
{
position:relative;
top:-50px;
}
</style>
</head>
<body>
<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>注意:</b> 即使相對定位元素的內(nèi)容是移動,預(yù)留空間的元素仍保存在正常流動。</p>
</body>
</html>????? ??? ??? ????? ??? ??? ???? ???? ???? ??? ????.
?? ?? ??
????? ??? ??? ??? ??? ?? ??? ??? ?? ?? ??? ???? ???. ??? ??? ??? ?? ??? ??? ?? ??? ??? ???? ???.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>This is a heading with an absolute position</h2>
<p>用絕對定位,一個元素可以放在頁面上的任何位置。標題下面放置距離左邊的頁面100 px和距離頁面的頂部150 px的元素。.</p>
</body>
</html>????? ?????. ??? ???
???? ?? ??? ??? ??? ???? ??? ????? ??? ??? ???? ????.
????? ??? ??? ?? ??? ????.
??? ??
??? ?? ??? ????? ????? ???? ?? ??? ?? ? ????.
z-index ??? ??? ?? ??? ?????(?? ??? ?? ?? ??? ?? ?)
??? ?? ?? ?? ?? ??? ?? ? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="100" height="140" />
<p>因為圖像元素設(shè)置了 z-index 屬性值為 -1, 所以它會顯示在文字之后。</p>
</body>
</html>????? ???? ??? ???
?? ??? ?? ??? ?? ?? ??? ?? ?? ?? ???.
??: ??? ? ??? ??? Z-??? ???? ?? ?? HTML ???? ????? ??? ??? ? ?? ?????.
? ?? ??
??? ??? ???? ?? ?? ???? ???? ???? ??
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</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 屬性規(guī)定當內(nèi)容溢出元素框時發(fā)生的事情。.</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>run ????? ???? ????? ???????. ??? ? ? ?? ????
