CSS上的位置甚至可以在其他设备上移动 [英] Position on CSS even move on other device
问题描述
我正在开发一个网络，然后当我换到不同的桌面或设备时我会卡住，位置也会改变。问题是如果我更换显示器，HOME和PRODUCT的链接将会改变，我希望HOME和PRODUCT在顶部和右侧。如果我在不同的屏幕上移动，那么这个位置永远不会改变。这是我的代码：
Hi,
I'm developing a web, then I get stuck when I changed to the different desktop or device the position will changed too.The problem the link of HOME and PRODUCT will change if I changed the monitor, I want the HOME and PRODUCT in the top and right. And the position will never change if I move on different screen. This my code :
#header {
background: #186467;
height: 700px;
width: 1500px;
line-height: 1300px;
position: fixed;
top: 0;
left: 0;
}
.logo {
float: left;
}
.product {
position: relative;
bottom: 615px;
left: 905px;
}
.home {
position: relative;
margin: 615px 100px 200px 300px;
}
bottom: 615px;
left: 850px;
}
<!DOCTYPE HTML>
<html>
<header>
<link rel="stylesheet" href="main.css"/> <!-- call the CSS file in the root folder (main.css) -->
<title>rafidkarim | Developing The World</title>
</header>
<body>
<section id="header"> <!-- HEADER -->
<img class="logo" src="images/logo.png"/> <!-- The Logo -->
<a class="home" href="#">HOME</a>
<a class="product" href="#">PRODUCT</a>
</section>
</body>
</html>
所以，我希望如果更改了监视器，桌面或设备，HTML内容的所有位置也不会改变。
So, I want if changed the monitor, desktop, or device all position of the HTML content would not changed too.
推荐答案
根据您尝试做的描述，您的CSS过于复杂。这样的事情应该有效：
Based on the description of what you're trying to do, your CSS is overly complicated. Something like this should work:
<header id="header" class="clearfix">
<img class="logo" src="images/logo.png">
<div class="links">
<a class="home" href="#">HOME</a>
<a class="product" href="#">PRODUCT</a>
</div>
</header>
.clearfix:before,
.clearfix:after
{
content: " ";
display: table;
}
.clearfix:after
{
clear: both;
}
.clearfix
{
*zoom: 1;
}
#header
{
background: #186467;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.logo
{
float: left;
}
.links
{
float: right;
}
.clearfix CSS类是 micro-clearfix [ ^ ]以确保标题内的浮动内容不会侵入以下元素。
因为您使用的是位置：修复作为标题，它不是文档流的一部分。您需要确保其余内容使用 margin-top 为标题留出足够的空间。
演示： https://jsfiddle.net/95vdjgc4/ [ ^ ]
The .clearfix CSS class is the micro-clearfix[^] to make sure that the floated content inside the header doesn't intrude onto the following elements.
Because you're using position:fixed for the header, it isn't part of the document flow. You'll need to make sure the rest of the content leaves enough room for the header using margin-top.
Demo: https://jsfiddle.net/95vdjgc4/[^]
这篇关于CSS上的位置甚至可以在其他设备上移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
