Html 调整CSS元素以消除重叠
在我当前的HTML项目中，我使用侧边导航栏进行网站导航。如果我在页面上向右滚动过多，侧导航栏将覆盖在页面正文上。如何防止侧栏针对浏览器中的视图端口进行调整。下面是一些截图和我的页面代码Html 调整CSS元素以消除重叠,html,css,dynamic,Html,Css,Dynamic,在我当前的HTML项目中，我使用侧边导航栏进行网站导航。如果我在页面上向右滚动过多，侧导航栏将覆盖在页面正文上。如何防止侧栏针对浏览器中的视图端口进行调整。下面是一些截图和我的页面代码 cjcahala.net * { 字体系列：“Arial圆角MT Bold”，“Helvetica圆角”，Arial，无衬线； } /***********************************/ @仅介质屏幕和（最大宽度：640像素）{ 身体{ 宽度：100%； 保证金：0自动； } .btn{
cjcahala.net
* {
字体系列：“Arial圆角MT Bold”，“Helvetica圆角”，Arial，无衬线；
}
/***********************************/
@仅介质屏幕和（最大宽度：640像素）{
身体{
宽度：100%；
保证金：0自动；
}
.btn{
字体系列：Arial；
颜色：#ffffff；
字体大小：12px；
填充：0px；
文字装饰：无；
保证金：自动；
文本对齐：居中；
}
.btn:悬停{
背景#3cb0fd；
文字装饰：无；
}
.btn2{
字体系列：Arial；
颜色：#ffffff；
字号：18px；
填充：8px；
文字装饰：无；
保证金：自动；
文本对齐：居中；
背景：#3498db；
}
.btn2：悬停{
背景#3cb0fd；
文字装饰：无；
}
.顶{
位置：绝对位置；
左：178px；右：0；
高度：92px；
保证金：自动；
}
.左{
位置：固定；
左：0；顶部：0；底部：0；
宽度：125px；
背景：#3498db；
保证金：自动；
}
梅因先生{
位置：绝对位置；
左：125px；上：92px；右：0；下：0；
宽度：400px；
保证金：自动；
}
p{
位置：相对位置；
左：20px；
}
佩皮先生{
位置：相对位置；
左：10px；
}
}
/***********************************/
@仅介质屏幕和（最小宽度：640px）{
身体{
宽度：100%；
保证金：0自动；
}
.btn{
字体系列：Arial；
颜色：#ffffff；
字号：18px；
填充：0px；
文字装饰：无；
保证金：自动；
文本对齐：居中；
}
.btn:悬停{
背景#3cb0fd；
文字装饰：无；
}
.btn2{
字体系列：Arial；
颜色：#ffffff；
字号：18px；
填充：8px；
文字装饰：无；
保证金：自动；
文本对齐：居中；
背景#FFFF00；
}
.btn2：悬停{
背景#3cb0fd；
文字装饰：无；
}
.顶{
位置：绝对位置；
左：178px；右：0；
高度：92px；
}
.左{
位置：固定；
左：0；顶部：0；底部：0；
宽度：178px；
背景：#3498db；
}
梅因先生{
位置：绝对位置；
左：178像素；顶部：92像素；右：0；底部：0；
宽度：400px；
}
p{
位置：相对位置；
左：20px；
}
佩皮先生{
位置：相对位置；
左：10px；
}
}
你好
感谢您抽出时间查看我的网站。我是一名有抱负的残奥会运动员，对未来有着远大的目标。我来自一个蓝领家庭，滑雪是一个非常昂贵的世界。看看网站，看看我的视频，或者给我发电子邮件，当然还有社交。如果你今天感觉特别棒，你甚至可以在下面捐款。
关于我
你好，我的名字是CJ卡哈拉，我希望实现一个梦想。作为一名残奥会运动员，在山上生活，希望能获得一些奖牌，这一直是我脑海中的一个想法。我是在经历了几个小时的胎儿窘迫和缺氧后出生的，缺氧导致了永久性的大脑损伤，表现为共济失调性脑瘫、全身性肌张力障碍和颈部肌张力障碍。要把一些大字说得小一点，有时我很难保持平衡，我的头不停地颤抖，我的手颤抖得很厉害，从大约二年级开始，我就不得不用电脑写东西，完成学业。还有一些人见到我，认为我只是个海洛因瘾君子，但那是另一回事了。随着我的成长，直到二年级左右，我才真正发现在助行器的帮助下学习走路或骑三轮自行车很奇怪或不正常。由于双手颤抖，我无法写下当天的写作评估，这时我开始哭泣。原因是我和其他孩子不一样，但我不知道，在小学里没有人真正关心任何事情，除了按时休息和尽可能多地交换冷午餐，让你在桌上吃到最好的午餐。随着年龄的增长，我开始意识到我的残疾更多的是一个讨论话题，而不是人们不与我交谈的原因。当我长大超过我的第一块棋盘时，我发现是时候提高我的游戏水平了。我用我能找到的最好的木板装饰了一下，很快就第一次去了科罗拉多州。当我来到科罗拉多州时，我想，“我可以这样做谋生！”。现在，这正是我想要做的。我妈妈是当地高中的助教，我爸爸是一名屏幕印刷工，我刚刚得到一份最低工资的工作，这就是为什么我需要赞助参加训练营和滑雪板比赛。如果你能找到一种方法让我与任何公司赞助商、赞助像我这样孩子的组织，或者你认为可能有兴趣听我讲故事的个人联系起来，我将不胜感激。如果你喜欢在山上度过的日子，那么你必须理解我渴望能够用一生的时间来实现我的梦想。
社交
像我这样的网站靠的是你——观众的社交能力。正如你可能已经看到的，我在页面顶部弹出了一些社交按钮。虽然这听起来很俗气，但在我的世界里，分享是一种关怀。看到这个网站的人越多，它背后的能量就越大，我需要能量来继续做我喜欢的事情。
更新及更多
所以，你看到我的网站，但想知道我在做什么。你在支持我，所以我不介意网络跟踪者。看看我的博客，你会看到在twitter上关注我的链接，或者关注我上传的Youtube（加上许多其他与我建立网络的方式），所有这些都是在互联网上花费时间的可怕的非生产性方式。如果你想来看看我的
想更多地了解我吗
如果你真的想知道更多关于我的信息，或者如果你有媒体查询，请发送电子邮件给我
联系我
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="">
<meta name="description" content="">
<meta name="author" content="">
<title>cjcahala.net</title>
<style>
* {
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}
/***********************************/
@media only screen and (max-width: 640px) {
body {
width: 100%;
margin: 0 auto;
}
.btn {
font-family: Arial;
color: #ffffff;
font-size: 12px;
padding: 0px;
text-decoration: none;
margin: auto;
text-align:center;
}
.btn:hover {
background: #3cb0fd;
text-decoration: none;
}
.btn2 {
font-family: Arial;
color: #ffffff;
font-size: 18px;
padding: 8px;
text-decoration: none;
margin: auto;
text-align:center;
background: #3498db;
}
.btn2:hover {
background: #3cb0fd;
text-decoration: none;
}
.top {
position:absolute;
left:178px; right:0;
height: 92px;
margin:auto;
}
.left {
position: fixed;
left:0; top:0; bottom: 0;
width: 125px;
background: #3498db;
margin:auto;
}
.main {
position: absolute;
left:125px; top:92px; right:0; bottom:0;
width:400px;
margin:auto;
}
p {
position:relative;
left:20px;
}
.peppy {
position:relative;
left:10px;
}
}
/***********************************/
@media only screen and (min-width: 640px) {
body {
width: 100%;
margin: 0 auto;
}
.btn {
font-family: Arial;
color: #ffffff;
font-size: 18px;
padding: 0px;
text-decoration: none;
margin: auto;
text-align:center;
}
.btn:hover {
background: #3cb0fd;
text-decoration: none;
}
.btn2 {
font-family: Arial;
color: #ffffff;
font-size: 18px;
padding: 8px;
text-decoration: none;
margin: auto;
text-align:center;
background: #FFFF00;
}
.btn2:hover {
background: #3cb0fd;
text-decoration: none;
}
.top {
position:absolute;
left:178px; right:0;
height: 92px;
}
.left {
position: fixed;
left:0; top:0; bottom: 0;
width: 178px;
background: #3498db;
}
.main {
position: absolute;
left:178px; top:92px; right:0; bottom:0;
width:400px;
}
p {
position:relative;
left:20px;
}
.peppy {
position:relative;
left:10px;
}
}
</style>
</head>
<body>
<div class="left">
<a class="btn" href="./index.html">Home</a><br><br>
<a class="btn" href="./about.html">About</a><br><br>
<a class="btn" href="./contact.html">Contact</a><br><br>
<a class="btn" href="./media.html">Media</a><br><br>
<a class="btn" href="http://cjcahala.tumblr.com/">Blog</a><br><br>
<a class="btn" href="./donate.html">Donate</a><br><br>
<a class="btn" href="https://twitter.com/share" data-related="cjcahala" data-hashtags="cjcahala">Share This Page On Twitter</a><br><br>
<a class="btn" href="https://twitter.com/intent/tweet?button_hashtag=cjcahala" data-related="cjcahala">Tweet #cjcahala</a><br><br>
<a class="btn" href="https://twitter.com/cjcahala" data-show-count="false">Follow Me @cjcahala</a><br><br>
<a class="btn" href="https://twitter.com/intent/tweet?screen_name=cjcahala" data-related="cjcahala">Tweet To Me @cjcahala</a><br><br>
<a class="btn" href="https://www.facebook.com/cjcahalparaolympic" data-action="like" data-send="true">Like Me On Facebook</a><br><br>
<a class="btn" href="http://www.youtube.com/channel/UCdUcO0wCP3Fu2RbF8uo-iCQ/featured">Subscribe To My Youtube Feed</a><br><br>
<a class="btn" href="https://plus.google.com/109790307919254113898/posts">Add Me To Your Google Plus Circle</a><br><br>
<a class="btn" href="http://cjcahala.tumblr.com/">Follow Me On Tumblr</a><br><br>
<a class="btn" href="http://instagram.com/cj_cahala">Follow Me On Instagram</a><br><br>
</div>
<div class="main">
<h1 class="peppy">Hello There</h1>
<p>
Thanks for taking the time to check out my site. I am an aspiring paralympic athlete with some big goals for the future. I come from a blue collar home and the world of snowboarding is a really expensive one. Check out the website, take a look at my videos, or email me, and of course be social. If you are feeling particularly awesome today, you can even donate below.
</p>
<p>
<a class="btn2" href="https://adaptiveadventures.webconnex.com/2013donate">Awesomeness-Infused Donate Button</a>
</p>
<h1 class="peppy">About Me</h1>
<p>
Hello, my name is CJ Cahala and I am hoping to accomplish a dream. It was always a thought in the back of my head of being a paralympic athlete, living life on the mountain and hopefully having some medals to show for it. I was born after several hours of fetal distress and a lack of oxygen causing permanent brain damage in the form of ataxic cerebral palsy, generalized dystonia, and cervical dystonia. To make some big words small, its hard for me to balance at times, my head shakes constantly, and my hands tremor badly enough that ever since about second grade I’ve had to use a computer to write things down and complete my school work. And then there’s the people that meet me and think I’m just a heroin junkie, but that’s another story. As I grew up I didn’t really find learning to walk with the assistance of a walker or riding a three wheeled bicycle was weird or not normal until about second grade. Due to the tremors in my hands I couldn’t write down the day’s writing assessment, and this was when I started to cry. The reason being was that I wasn’t like the other kids, but little did I know that no-one really cared about anything in elementary school except getting to recess on time and trading up your cold lunch as much as possible so that you got the best lunch at the table. As I grew older I started to realize that my disability was more of a discussion topic than a reason for people not to converse with me. By the time I outgrew my first board I found that it was time to step my game up. I got decked out with the best board I could find and soon got out to Colorado for the first time. It was when I got out to Colorado that I thought, “I could so do this for a living!”. And now, that is exactly what I want to do. My mom is a teacher’s aid at the local high school and my dad is a screen printer, and I just got a minimum wage job, which is why I need sponsorship for my travels to training camps and snowboardcross competitions. If you could find a way to get me connected with any corporate sponsors, organizations who sponsor kids like me, or individual people that you think may be interested to hear my story, my thanks will be endless. If you love powder days out on the mountain, then you must understand my yearn to be able to spend my life living my dream snowboarding.
</p>
<h4 class="peppy">Be Social</h4>
<p>
A website like mine thrives on you-the viewer- being social. As you may have seen, I threw up some socialte buttons at the top of the page. Though it may sound cheesy, sharing is caring in my world. The more people who see the site, the more energy it has behind it, and energy is what I need to keep doing what I love.
</p>
<h4 class="peppy">Updates and More</h4>
<p>
So, you see my site, but want know what I'm doing. You are supporting me, so I don't mind internet stalkers. Check out my blog <a href="http://cjcahala.tumblr.com/">here</a> and from there, you will see links to follow me on twitter or get all caught up on my Youtube uploads (plus many other ways to network with me), all of which are awesome non-productive ways to spend time on the internet. If you want come check out my <a href="http://cjcahala.tumblr.com/">Blog</a>
</p>
<h4 class="peppy">Want To Learn More About Me</h4>
<p>
If you really want to know more about me or if you have a media inquiry, send me an email at <a href="mailto:is-cj@anche.no">is-cj@anche.no</a>
<h1 class="peppy">Contacting Me</h1>
<p class="lead">
To contact me please email me at <a href="mailto:is-cj@anche.no">is-cj@anche.no</a>. The social networking buttons at the top of the page can also be used to connect with me. If you wish to donate, you can click on the donate button below and be sure to put "This donation is for CJ Cahala" in the "notes" section of the Adaptive Adventures donate page. If you have any donation questions, you can send me an email again at <a href="mailto:is-cj@anche.no">is-cj@anche.no</a>.
</p>
<h1 class="peppy">Check Out My Videos</h1>
<p>
<!--Video player-->
<iframe width="640" height="360" src="http://www.youtube.com/embed/InaOC5h2Ebo?rel=0" frameborder="0" allowfullscreen></iframe>
<!--Video Description-->
</p>
</div>
</body>
</html>
.left {
position: absolute;
left:0; top:0; bottom: 0;
width: 125px;
background: #3498db;
margin:auto;
}