- 浏览: 218883 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (209)
- database (25)
- java技巧 (25)
- TC总结 (4)
- J2EE (8)
- 算法 (6)
- blog (4)
- php (4)
- linux & mac (19)
- 其它技术 (4)
- javascript&ajax (26)
- 测试技术 (8)
- XML&HTML (2)
- ORM (hibernate ...) (11)
- eclipse (5)
- 技术书籍 (8)
- 项目管理,cmmi (3)
- 硬件技术 (1)
- REST, web service, web架构 (1)
- 卓有成效程序员 (2)
- qone开发 (1)
- Design (4)
- .net (5)
- SCM (4)
- css (23)
- programming languages (1)
- ide (2)
- CSS Patterns (18)
- security (1)
- android (5)
最新评论
-
Virtoway:
说到Angular JS刚读到一片美国构架师的文章关于使用An ...
angular js: angular.bind example -
08284008:
该毛线啊,一点解释的都没有,怎么看
Thread join() 用法 -
Rex86lxw:
在eclipse中我一直用Navigator查看编写代码的,可 ...
eclipse不能自动编译,不报错 -
mistake:
..............
Angular js scope: the child scope would inherit from the parent scope -
sparrow1314:
very good! thanks!
IE下JS调试工具
Positioning
The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
There are four different positioning methods.
Static Positioning
HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.
Fixed Positioning
An element with fixed position is positioned relative to the browser window.
It will not move even if the window is scrolled:
Note: IE7 and IE8 support the fixed value only if a !DOCTYPE is specified.
Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.
Fixed positioned elements can overlap other elements.
Relative Positioning
A relative positioned element is positioned relative to its normal position.
Example
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
Try it yourself »
The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.
Relatively positioned elements are often used as container blocks for absolutely positioned elements.
Absolute Positioning
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:
Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.
Absolutely positioned elements can overlap other elements.
Overlapping Elements
When elements are positioned outside the normal flow, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
An element can have a positive or negative stack order:
An element with greater stack order is always in front of an element with a lower stack order.
Note: If two positioned elements overlap, without a z-index specified, the element positioned last in the HTML code will be shown on top.
发表评论
-
The 30 CSS Selectors you Must Memorize
2013-07-05 21:51 744The 30 CSS Selectors you Must ... -
Link up background image
2012-03-27 20:55 572TBD -
Simple switch themes
2012-03-27 20:53 756Problems: Two pages have s ... -
Pull common style up
2012-03-27 20:52 490Problems : For the common s ... -
Element With Attachment
2012-03-15 22:03 657Problems: Some elements has ... -
Navigation with ul and li
2012-03-15 21:15 578Problems: We need a navigati ... -
Clear floated elements
2012-03-14 21:34 468Problems: Floated elements ... -
Columns With Relative Width
2012-03-12 22:00 559Problem: Suppose we need to ... -
Blocked Wrapper
2012-03-12 21:44 631Problem: We have a container ... -
Required red star
2012-03-11 18:05 623Problem: We usually put a ... -
Overlapped Margins
2012-03-11 15:07 595Problem: The vertically neig ... -
Padding Images With Background Image
2012-03-10 21:33 647Problems: We want to display ... -
Full Screen Page Width
2012-03-09 12:02 929The page does not has a fixed w ... -
Fixed Pixels Page Width
2012-03-09 10:28 678The whole page displays with a ... -
CSS Reset
2012-03-07 22:14 528Purpose: To dismiss pro ... -
Vertically Centering With Line-Height
2012-02-26 17:58 549Problems: We want to keep th ... -
Padding Images With Absolute Position
2012-02-18 22:26 507Problems: We want to display ... -
Horizontally centering with "margin auto"
2012-02-13 22:32 615Problems: We want to keep th ... -
Wrap the line in pre
2012-02-10 17:31 580Problem: The <pre> tag ... -
hover on one part, display another part on page by CSS
2012-01-08 15:42 496.log:hover .log_manage { ...
相关推荐
Absolute Positioning of CSS
The Grid Layout spec will soon change your approach to website design, but there will still be plenty of uses for CSS positioning tricks. Whether you want to create sidebars that remain in the ...
performance, and appearance of your work.You’ll learn how document flow and CSS positioning schemes will help you make your documents more accessible. You’ll discover the great styling ...
8. CSS Positioning Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301 9. CSS for Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...
8. CSS Positioning and Layout ................................................................. 251 9. Experimentation, Browser Specific CSS, and Future Techniques ........... 327 Index .................
Positioning in CSS Layout Enhancements for the Web 英文epub 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
DHTML 不是由万维网联盟(W3C)规定的标准。... CSS Positioning (允许您控制元素的定位和可见性) JavaScript 可视滤镜(允许您向文本和图形应用可视效果) 动态 CSS(允许您控制元素的定位和可见性)
Positioning in CSS Layout Enhancements for the Web 英文mobi 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
css布局与定位
Positioning in CSS Layout Enhancements for the Web 英文无水印pdf pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,...
The CSS Quick Syntax Reference is a 150-page syntax reference to the Cascading Style Sheet specification and style ...21. Positioning 22. Classification 23. List 24. Table 25. Media 26. Best practices
Use professional design techniques such as floats and positioning. Look great on any device. Craft websites that adapt to desktop, tablet, and mobile browsers. Get advanced techniques. Use CSS3 more ...
CSS-Positioning
css定位 为简单起见,使用 react 构建的常见 css 定位方法教程。 此 repo 旨在用作现场演示和概念证明。 npx create-react-app 生成的自述文件: 创建 React 应用程序入门 这个项目是用引导的。 可用脚本 在项目目录...
Floats and positioning tricks Flexible box layout The new Grid layout system 2D and 3D transforms, transitions, and animation Filters, blending, clipping, and masking Media and feature queries
在CSS中练习定位的一系列分类挑战 我该如何练习? 1.首先,在系统上克隆存储库 git clone https://github.com/juniorcoders-ir/css-positioning.git 2.代码,实践:)
Discover how the positioning and floating properties really work! Explore professional typographic techniques using downloadable fonts Style UI elements, such as drop-down menus, forms, and pop-up ...
高清 文字版 有书签。
By Eric Meyer (Author) CSS: The Definitive Guide, 3rd Edition, provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover ...
Tips for enhancing your design using backgroundsThe four different types of positioning: static, relative, absolute, and fixed How to change the behavior of elements in an XML or HTML/XHTML document