绝对定位内部绝对位置Div
[英]Absolute Positioning Inside Absolutly Positioned Div
问题描述
I'm a relatively new guy to HTML and CSS so sorry if this is a stupid question. 
我是HTML和CSS的新手，如果这是一个愚蠢的问题，请对不起。
Anyway I can't seem to re-create this: 无论如何，我似乎无法重新创建此代码：
I am converting this mobile app into a webpage. 我正在将该移动应用程序转换为网页。 Anyway I have a 'wrapping' to make everything centred when resizing which was my first problem but then when I did that I could not reposition the divs that are inside the wrapping when using position:absolute. 无论如何，我有一个“包装”来在调整大小时使所有内容居中，这是我的第一个问题，但是当我这样做时，当我使用position：absolute时，我无法重新定位包装内的div。 I partly fixed this by using relative positioning for one of the divs but this caused me to not be able to put the relatively positioned one where I wanted it. 我通过对div之一使用相对定位来部分解决此问题，但这导致我无法将相对定位的div放在我想要的位置。 My question: How do I arrange the icons like the image and have it not move when loaded in different resolutions and when the window is resized? 我的问题：当以不同的分辨率加载并调整窗口大小时，如何排列图标，使其像图像一样不移动？
/* Body */ #body { background-image: url('images/bg-img.jpg'); font-family: Museo300-Regular, Museo700-Regular; } /* Font */ @font-face { font-family: Museo300-Regular; src: url(Museo300-Regular.otf) } /* Nav */ #wrapper { margin-left: auto; margin-right: auto; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Safari */ transform: translate(-50%, -50%); } #home { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Safari */ transform: translate(-50%, -50%); z-index: 6; } #contact { position: absolute; top: 80%; left: 30%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Safari */ transform: translate(-50%, -50%); z-index: 5; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Micah Friesen</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body id="body"> <!-- page content --> <!-- Navigation --> <div id="wrapper"> <div id="home"> <a href="index.html"> <img src="images/homebttn2.png" title="Homepage (Here)" /> </a> </div> <div id="contact"> <a href="contact.html"> <img src="images/contactbttn.png" title="Contact Me, this also includes Rates" /> </a> </div> </div> </body> </html>
for both the images (containing the icons) Here is my code^ 这两个图像（包含图标）都在这里，这是我的代码^
3 个解决方案
解决方案1
0 2015-04-23 03:07:57
With the flex layout , you can center quite well an element, horizontally and vertically. 使用flex布局 ，您可以很好地将元素水平和垂直居中。
html {
height: 100%
}
body {
background-image: url('images/bg-img.jpg');
font-family: Museo300-Regular, Museo700-Regular;
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
#wrapper {
position: relative;
}
#wrapper > div {
border-radius: 50%;
width: 100px;
height: 100px;
overflow: hidden;
margin: auto;
position: relative;
}
#wrapper > div#home {
width: 150px;
height: 150px;
}
#wrapper > div#contact {
width: 100px;
height: 100px;
left: -150px;
top: 10px
}
http://codepen.io/gaelb/pen/XbWzRV?editors=110 http://codepen.io/gaelb/pen/XbWzRV?editors=110
解决方案2
0 2015-04-23 03:40:17
I didn't have your images (width, height, or position), so I used some temporary images and placed them offset from-center on the screen. 我没有您的图像（宽度，高度或位置），因此我使用了一些临时图像并将其偏离屏幕中心。 Here's a minimal set of code to get you going with your positioning absolute-to-center. 这是最少的代码集，可帮助您从绝对中心定位。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
/* Body */
#body {
background-image: url('images/bg-img.jpg');
font-family: Museo300-Regular, Museo700-Regular;
}
/* Font */
@font-face {
font-family: Museo300-Regular;
src: url(Museo300-Regular.otf)
}
/* Nav */
#home {
position: absolute;
top: 50%;
left: 50%;
z-index: 6;
margin-left: 20px;
margin-top: -200px;
}
#contact {
position: absolute;
top: 50%;
left: 50%;
margin-top: 160px;
margin-left: -180px;
z-index: 8;
}
</style>
</head>
<body id="body">
<!-- page content -->
<!-- Navigation -->
<div id="wrapper">
<div id="home">
<a href="index.html">
<img src="images/temp2.png" title="Homepage (Here)" />
</a>
</div>
<div id="contact">
<a href="contact.html">
<img src="images/temp.png" title="Contact Me, this also includes Rates" />
</a>
</div>
</div>
</body>
</html>
解决方案3
-1 2015-04-23 02:48:12
It seems like you will eventually want to create media queries for the different resolution break-points. 看来您最终将要为不同的分辨率断点创建媒体查询。 In the mean time however, since it appears all of your graphical elements are relative to a center-point on the screen, you can use the following formula to position each item: 但是，与此同时，由于所有图形元素似乎都相对于屏幕上的中心点，因此可以使用以下公式来定位每个项目：
#itemName {
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px /* Image top edge distance from center, vertically */
margin-left: -100px; /* Image left edge distance from center, horizontally */
}
If you're loading different resolution images dependent on screen-width, you will need to use media query detection or javascript to properly-adjust the margins of each icon. 如果要加载取决于屏幕宽度的不同分辨率的图像，则需要使用媒体查询检测或JavaScript来正确调整每个图标的边距。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.