我可以使用哪种 CSS 不会产生（许多）副作用的定位？
What kind of CSS positioning can I use that isn't going to have (many) side effects?
我目前正在建设一个网站，但我找不到有效的 CSS 定位方法，这意味着任何 CSS 定位元素都不能使其他 HTML元素行为怪异。是否有任何 CSS 定位方法可以精确、准确地定位 HTML 元素并且不会导致其他元素出现（许多）问题？目前 float 和 position: absolute; 效果不佳。谢谢！
因为显然我问的不清楚，所以我问 "What kind of positioning can I use that doesn't have any (or few) side effects?"
这是我正在处理的代码：
li {
display: inline-block;
}
ul {
display: inline-block;
margin: 0px;
padding: 0px;
}
#main_nav, logo {
display: inline-block;
padding: 0px;
margin: 0px;
}
nav li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
border: 2px solid black;
border-radius: 5px;
color: black;
}
nav li a:visited {
color: rgba(0,0,0,0.7);
}
nav li a:hover {
background-color: rgba(0,0,0,0.6);
color: white;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 130px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
position: absolute;
right: 0px;
top: 0px;
}
#searchbox_div {
position: relative;
display: inline-block;
padding: 0;
width: 100%;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
}
#logo_jeff, #logo_arries, #logo_website {
margin: 0px;
}
#logo_jeff {
letter-spacing: 35.5px;
}
#logo_arries {
letter-spacing: 11px;
}
#logo_website {
letter-spacing: 4px;
}
body {
background-image: url("../pictures/jeff_skiing.jpg");
background-color: red;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.7);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
text-align: center;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 0;
padding: 10px 10px 20px 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
background-color: rgba(0,0,0,0.9);
}
#r_a_show_more_link:active {
color: black;
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<div id="searchbox_div">
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
</div>
<div id="logo">
<h1 id="logo_jeff">JEFF</h1>
<h1 id="logo_arries">ARRIES</h1>
<h1 id="logo_website">WEBSITE</h1>
</div>
<div id="main_nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Trips</a></li>
<li><a href="">Politics</a></li>
<li><a href="">Pictures</a></li>
<li><a href="">Videos</a></li>
<li><a href="">Computer</a></li>
<li><a href="">Misc</a></li>
</ul>
</div>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h2 id="welcome">Welcome to my Website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<a href=""><p id="m_f_show_more">Show More</p></a>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<a href="" id="r_a_show_more_link"><p id="r_a_show_more">Show More</p></a>
</div>
</div>
</body>
每种定位方法都有一个目的和定义明确的行为，即使有时不直观。您不能选择 "won't mess things up"。没有像 "always use relative" 这样的捷径，因为每种方法都完成了其他方法无法完成的不同事情。
我碰巧认为 CSS 中的定位定义非常糟糕，但这是我们必须处理的事情，您唯一能做的就是了解每个人的行为以及他们如何互动。会有一些你无法完成的事情1，并且在 CSS 布局成熟之前，情况将继续如此。
我能给你的唯一建议是预留一些时间，比如在接下来的几周内花 8-16 个小时，来尝试基本布局并试验所有定位方法。使用 Firefox 或 Chrome 的开发人员工具来详细检查事物的布局方式，并一次进行一个特定的更改，直到您开始了解选项之间的交互方式。这是一个非常复杂的烂摊子，需要一些时间来学习它。但是一旦你做到了，你就会拥有一套可以很好地为你服务的技能。
1 正如我最近了解到的那样，我非常失望。我确实发现了一些涉及复制内容的 变通办法 严重的黑客攻击，但这种做法太疯狂了。我希望新的 flex 定位的东西能理智地解决，但我没有屏住呼吸。
从您的 HTML 中删除此内容：
<div id="searchbox_div">
</div>
但显然将表单保留在其中，它不需要包含在 div 中，因为它已经在导航元素中。
这里正在工作Fiddle
我目前正在建设一个网站，但我找不到有效的 CSS 定位方法，这意味着任何 CSS 定位元素都不能使其他 HTML元素行为怪异。是否有任何 CSS 定位方法可以精确、准确地定位 HTML 元素并且不会导致其他元素出现（许多）问题？目前 float 和 position: absolute; 效果不佳。谢谢！
因为显然我问的不清楚，所以我问 "What kind of positioning can I use that doesn't have any (or few) side effects?"
这是我正在处理的代码：
li {
display: inline-block;
}
ul {
display: inline-block;
margin: 0px;
padding: 0px;
}
#main_nav, logo {
display: inline-block;
padding: 0px;
margin: 0px;
}
nav li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
border: 2px solid black;
border-radius: 5px;
color: black;
}
nav li a:visited {
color: rgba(0,0,0,0.7);
}
nav li a:hover {
background-color: rgba(0,0,0,0.6);
color: white;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 130px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
position: absolute;
right: 0px;
top: 0px;
}
#searchbox_div {
position: relative;
display: inline-block;
padding: 0;
width: 100%;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
}
#logo_jeff, #logo_arries, #logo_website {
margin: 0px;
}
#logo_jeff {
letter-spacing: 35.5px;
}
#logo_arries {
letter-spacing: 11px;
}
#logo_website {
letter-spacing: 4px;
}
body {
background-image: url("../pictures/jeff_skiing.jpg");
background-color: red;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.7);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
text-align: center;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 0;
padding: 10px 10px 20px 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
background-color: rgba(0,0,0,0.9);
}
#r_a_show_more_link:active {
color: black;
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<div id="searchbox_div">
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
</div>
<div id="logo">
<h1 id="logo_jeff">JEFF</h1>
<h1 id="logo_arries">ARRIES</h1>
<h1 id="logo_website">WEBSITE</h1>
</div>
<div id="main_nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Trips</a></li>
<li><a href="">Politics</a></li>
<li><a href="">Pictures</a></li>
<li><a href="">Videos</a></li>
<li><a href="">Computer</a></li>
<li><a href="">Misc</a></li>
</ul>
</div>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h2 id="welcome">Welcome to my Website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<a href=""><p id="m_f_show_more">Show More</p></a>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<a href="" id="r_a_show_more_link"><p id="r_a_show_more">Show More</p></a>
</div>
</div>
</body>
每种定位方法都有一个目的和定义明确的行为，即使有时不直观。您不能选择 "won't mess things up"。没有像 "always use relative" 这样的捷径，因为每种方法都完成了其他方法无法完成的不同事情。
我碰巧认为 CSS 中的定位定义非常糟糕，但这是我们必须处理的事情，您唯一能做的就是了解每个人的行为以及他们如何互动。会有一些你无法完成的事情1，并且在 CSS 布局成熟之前，情况将继续如此。
我能给你的唯一建议是预留一些时间，比如在接下来的几周内花 8-16 个小时，来尝试基本布局并试验所有定位方法。使用 Firefox 或 Chrome 的开发人员工具来详细检查事物的布局方式，并一次进行一个特定的更改，直到您开始了解选项之间的交互方式。这是一个非常复杂的烂摊子，需要一些时间来学习它。但是一旦你做到了，你就会拥有一套可以很好地为你服务的技能。
1 正如我最近了解到的那样，我非常失望。我确实发现了一些涉及复制内容的 变通办法 严重的黑客攻击，但这种做法太疯狂了。我希望新的 flex 定位的东西能理智地解决，但我没有屏住呼吸。
从您的 HTML 中删除此内容：
<div id="searchbox_div">
</div>
但显然将表单保留在其中，它不需要包含在 div 中，因为它已经在导航元素中。
这里正在工作Fiddle