📄 css_positioning.asp
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Positioning Properties</title>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Keywords" content="xml,tutorial,html,dhtml,css,xsl,xhtml,javascript,asp,ado,vbscript,dom,sql,colors,soap,php,authoring,programming,training,learning,beginner's guide,primer,lessons,school,howto,reference,examples,samples,source code,tags,demos,tips,links,FAQ,tag list,forms,frames,color table,w3c,cascading style sheets,active server pages,dynamic html,internet,database,development,Web building,Webmaster,html guide" />
<meta name="Description" content="Free HTML XHTML CSS JavaScript DHTML XML DOM XSL XSLT RSS AJAX ASP ADO PHP SQL tutorials, references, examples for web building." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<link rel="stylesheet" type="text/css" href="../stdtheme.css" />
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "../../https@ssl./default.htm" : "../../www./default.htm");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3855518-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</head>
<body>
<a name="top"></a>
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#808080">
<tr>
<td width="234" valign="top">
<a href="../default.htm"><img src="../images/w3default80.jpg" border="0" alt="W3Schools" /></a>
</td>
<th valign="middle" align="left" class="right">
<script type="text/javascript"><!--
google_ad_client = "pub-3440800076797949";
/*txtimg*/
google_ad_slot = "5330033957";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript" src="../../pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<noscript>
<a href="../default.asp" target="_blank"><img src="../banners/w6.gif" border="0" alt="W3Schools" /></a>
</noscript>
<br /></th>
</tr>
</table>
<table style="margin-left:1px" width="800px" border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="137" class="content" valign="top"><br />
<a class="left" href="../default.asp" target="_top">
<img src="../images/homeicon.gif" border="0" alt="home" /></a>
<a class="left" href="../default.asp" target="_top">
<b>HOME</b></a>
<br /><br />
<b>CSS Basic</b><br />
<a class="left" target="_top" href="default.asp" >CSS HOME</a><br />
<a class="left" target="_top" href="css_intro.asp" >CSS Introduction</a><br />
<a class="left" target="_top" href="css_syntax.asp" >CSS Syntax</a><br />
<a class="left" target="_top" href="css_howto.asp" >CSS How To</a><br />
<a class="left" target="_top" href="css_background.asp" >CSS Background</a><br />
<a class="left" target="_top" href="css_text.asp" >CSS Text</a><br />
<a class="left" target="_top" href="css_font.asp" >CSS Font</a><br />
<a class="left" target="_top" href="css_border.asp" >CSS Border</a><br />
<a class="left" target="_top" href="css_outline.asp" >CSS Outline</a><br />
<a class="left" target="_top" href="css_margin.asp" >CSS Margin</a><br />
<a class="left" target="_top" href="css_padding.asp" >CSS Padding</a><br />
<a class="left" target="_top" href="css_list.asp" >CSS List</a><br />
<a class="left" target="_top" href="css_table.asp" >CSS Table</a><br />
<br />
<b>CSS Advanced</b><br />
<a class="left" target="_top" href="css_dimension.asp" >CSS Dimension</a><br />
<a class="left" target="_top" href="css_classification.asp" >CSS Classification</a><br />
<a class="left" target="_top" href="css_positioning.asp" style='font-weight:bold;'>CSS Positioning</a><br />
<a class="left" target="_top" href="css_pseudo_classes.asp" >CSS Pseudo-class</a><br />
<a class="left" target="_top" href="css_pseudo_elements.asp" >CSS Pseudo-element</a><br />
<a class="left" target="_top" href="css_image_gallery.asp" >CSS Image Gallery</a><br />
<a class="left" target="_top" href="css_image_transparency.asp" >CSS Image Opacity</a><br />
<a class="left" target="_top" href="css_mediatypes.asp" >CSS Media Types</a><br />
<a class="left" target="_top" href="css_dont.asp" >CSS Don't</a><br />
<a class="left" target="_top" href="css_summary.asp" >CSS Summary</a><br />
<br />
<b>CSS Examples</b><br />
<a class="left" target="_top" href="css_examples.asp" >CSS Examples</a><br />
<br />
<b>References</b>
<br />
<a class="left" target="_top" href="css_reference.asp" >CSS2 Reference</a><br />
<a class="left" target="_top" href="css_ref_print.asp" >CSS2 Print</a><br />
<a class="left" target="_top" href="css_ref_aural.asp" >CSS2 Aural</a><br />
<a class="left" target="_top" href="css_units.asp" >CSS Units</a><br />
<a class="left" target="_top" href="css_colors.asp" >CSS Colors</a><br />
<a class="left" target="_top" href="css_colorsfull.asp" >CSS Colorvalues</a><br />
<a class="left" target="_top" href="css_colornames.asp" >CSS Colornames</a><br />
<br />
<b>CSS Quiz</b><br />
<a class="left" target="_top" href="css_quiz.asp" >CSS Quiz</a><br />
<a class="left" target="_top" href="css_exam.asp" >CSS Exam</a><br />
<br />
<b>Selected Reading</b><br />
<a class="left" target="_top" href="../browsers/browsers_stats.asp">Web Statistics</a><br />
<a class="left" target="_top" href="../site/site_glossary.asp">Web Glossary</a><br />
<a class="left" target="_top" href="../hosting/default.asp">Web Hosting</a><br />
<a class="left" target="_top" href="../quality/default.asp">Web Quality</a><br /><br />
<a class="left" target="_top" href="../forum/default.asp">W3Schools Forum</a><br /><br />
<a class="left" target="_top" href="../about/about_helping.asp">Helping W3Schools</a><br /><br />
<script type="text/javascript"><!--
google_ad_client = "pub-3440800076797949";
/*LeftLinkUnit*/
google_ad_slot = "4854527104";
google_ad_width = 120;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="../../pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
<td valign="top">
<table style="border: 1px solid gray" width="100%" bgcolor="#FFFFFF" border="0" cellpadding="5" cellspacing="0">
<tr>
<td>
<h1>CSS Positioning</h1>
<a href="css_classification.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
<a href="css_pseudo_classes.asp"><img border="0" src="../images/btn_next.gif" width="100" height="20" alt="Next" /></a>
<hr />
<p class="intro">The CSS positioning properties allows you to position an element.</p>
<hr />
<h2>Examples</h2>
<p><a target="_blank" href="tryit.asp@filename=trycss_position_relative">Position:relative</a><br />
This example demonstrates how to position an element relative to its normal position.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_position_absolute">Position:absolute</a><br />
This example demonstrates how to position an element using an absolute value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_position_fixed">
Position:fixed</a><br />
This example demonstrates how to position an element with relative to the
browser window.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_clip">Set the shape of an element</a><br />
This example demonstrates how to set the shape of an element. The element is
clipped into this shape, and displayed.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_overflow">How to show
overflow in an element using scroll</a><br />
This example demonstrates how to set the overflow property to create a scroll
bare when an element's content
is too big to fit in a specified area.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_pos_overflow_hidden">How
to hide overflow in an element</a><br />
This example demonstrates how to set the overflow property to hide the content
if it is too big to fit in a specified area.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_pos_overflow_auto">How to
show set the browser to automatically handle overflow</a><br />
This example demonstrates how to set the browser to automatically handle
overflow.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_vertical-align">Vertical alignment of an image</a><br />
This example demonstrates how to set the vertical align of an image in a text.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_zindex2">Z-index</a><br />
Z-index can be used to place an element "behind" another element.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_zindex1">Z-index</a><br />
The elements in the example above have now changed their Z-index.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_position_top">Set the top
edge of an image using a pixel value</a><br />
This example demonstrates how to set the top edge of an element using a pixel
value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_position_top_percent">Set
the top edge of an image using a percent value</a><br />
This example demonstrates how to set the top edge of an element using a percent
value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_position_bottom">Set the
bottom edge of an image using a pixel value</a><br />
This example demonstrates how to set the bottom edge of an element using a pixel
value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_position_bottom_percent">
Set the bottom edge of an image using a percent value</a><br />
This example demonstrates how to set the bottom edge of an element using a
percent value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_position_left">Set the
left edge of an image using a pixel value</a><br />
This example demonstrates how to set the left edge of an element using a pixel
value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_position_left_percent">Set
the left edge of an image using a percent value</a><br />
This example demonstrates how to set the left edge of an element using a percent
value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_position_right">Set the
right edge of an image using a pixel value</a><br />
This example demonstrates how to set the right edge of an element using a pixel
value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_position_right_percent">
Set the right edge of an image using a percent value</a><br />
This example demonstrates how to set the right edge of an element using a
percent value.</p>
<hr />
<h2>CSS Positioning Properties</h2>
<p>The CSS positioning properties allow you to specify the left, right, top, and
bottom position of an element. It also allows you to set the shape of an
element, place an element behind another, and to specify what should happen when an element's content
is too big to fit in a specified area.</p>
<p>
<b>Browser support:</b> IE: Internet Explorer, F: Firefox, N: Netscape.</p>
<p>
<b>W3C:</b> The number in the "W3C" column indicates in which CSS recommendation
the property is defined (CSS1 or CSS2).</p>
<table class="ex" cellspacing="0" border="1" width="100%" cellpadding="3">
<tr>
<th width="25%" align="left">Property</th>
<th width="30%" align="left">Description</th>
<th width="25%" align="left">Values</th>
<th width="5%" align="left">IE</th>
<th width="4%" align="left">F</th>
<th width="4%" align="left">N</th>
<th width="7%" align="left">W3C</th>
</tr>
<tr>
<td valign="top"><a href="pr_pos_bottom.asp">bottom</a></td>
<td valign="top">Sets how far the bottom edge of an element is above/below the
bottom edge of the parent element</td>
<td valign="top">auto<br />
<i>%<br />
length</i></td>
<td valign="top">5</td>
<td valign="top">1</td>
<td valign="top">6</td>
<td valign="top">2</td>
</tr>
<tr>
<td valign="top"><a href="pr_pos_clip.asp">clip</a></td>
<td valign="top">Sets the shape of an element. The element is clipped into
this shape, and displayed</td>
<td valign="top"><i>shape<br />
</i>auto</td>
<td valign="top">4</td>
<td valign="top">1</td>
<td valign="top">6</td>
<td valign="top">2</td>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -