绝对位置冲突

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了绝对位置冲突相关的知识，希望对你有一定的参考价值。

this layout has a fixed width sidebar and a fluid main body.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  3. <head>
  4.  
  5. <title>Conflicting Absolute Positions - Demonstration layout 1</title>
  6.  
  7. <link type="text/css" rel="stylesheet" href="style.css" media="screen" />
  8.  
  9. <style type="text/css">
  10.  
  11. html {
  12. 	overflow: hidden;
  13. }
  14.  
  15. body {
  16. 	overflow: hidden;
  17. 	padding: 0;
  18. 	margin: 0;
  19. 	width: 100%;
  20. 	height: 100%;
  21. }
  22.  
  23. #top {
  24. 	padding: 0;
  25. 	margin: 0;
  26. 	position: absolute;
  27. 	top: 0px;	
  28. 	left: 0px;
  29. 	width: 100%;
  30. 	height: 80px;
  31. 	overflow: hidden;
  32. }
  33.  
  34. #main {
  35. 	padding: 0;
  36. 	margin: 0;
  37. 	position: absolute;	
  38. 	top: 100px;
  39. 	left: 240px;
  40. 	right: 20px;
  41. 	bottom: 20px;
  42. 	overflow: auto;
  43. }
  44.  
  45. #side {	
  46. 	padding: 0;
  47. 	margin: 0;
  48. 	position: absolute;	
  49. 	top: 100px;
  50. 	left: 20px;
  51. 	bottom: 20px;
  52. 	width: 200px;
  53. 	overflow: auto;	
  54. }
  55.  
  56. </style>
  57.  
  58. <!--[if lt IE 7]>
  59. <style type="text/css">
  60.  
  61. #main {
  62. 	height:expression(document.body.clientHeight-120); /* 80+20+20=120 */
  63. 	width:expression(document.body.clientWidth-260); /* 200+20+20+20=260 */
  64. }
  65.  
  66. #side {
  67. 	height:expression(document.body.clientHeight-120); /* 80+20+20=120 */
  68. }
  69.  
  70. </style>
  71. <![endif]-->
  72.  
  73. </head>
  74.  
  75. <body>
  76.  
  77. <div id="top">
  78. 	<div class="content">
  79. 		<h2>Header</h2>
  80. 	</div>
  81. </div>
  82.  
  83. <div id="side">
  84. 	<div class="content">
  85. 		<h2>Sidebar</h2>
  86.  
  87. 		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
  88. 		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
  89. 	</div>
  90. </div>
  91.  
  92. <div id="main">
  93. 	<div class="content">
  94. 		<h2>Main content</h2>
  95. 		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
  96.  
  97. 		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
  98. 		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
  99. 		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
  100. 		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
  101. 		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
  102. 		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
  103.  
  104. 	</div>
  105. </div>
  106.  
  107. </body>
  108. </html>

以上是关于绝对位置冲突的主要内容，如果未能解决你的问题，请参考以下文章

IFRAME 和冲突的绝对位置

如何优化C ++代码的以下片段 - 卷中的零交叉

如何获取edittext游标的绝对屏幕位置？

FAB 的片段布局与 CoordinatorLayout 冲突

FragmentPagerAdapter 覆盖 getItem() 方法冲突

CSS代码片段