当前位置: 动力学知识库 > 问答 > 编程问答 >

html - CSS div to place image without interfering with other divs

问题描述:

I am creating a web site for my church. Because they know of no web programmer members, I am taking care of it with my meager skills. My problem is merely one of placement. I am trying to place an image in the top-left of the page, but, no matter what I do, it interferes with the other div elements on the page. This is my current CSS:

body {

background-color: #FFFFFF;

font-size:12px;

font-family:Verdana, Arial, Helvetica, sans-serif;

}

div#wrapper {

width: 90%;

background-color:#ffffff;

margin-top: 50px;

margin-bottom: 50px;

margin-left: auto;

margin-right: auto;

padding: 0px;

border: thin solid blue;

}

div#image {

padding: 15px;

margin: 0px;

float: left;

}

div#header {

padding: 15px;

margin: 0px;

text-align: center;

}

div#nav {

width: 25%;

padding: 10px;

margin-top: 100px;

float: left;

}

div#main {

margin-left: 30%;

margin-top: 100px;

padding: 10px;

}

div#footer {

padding: 15px;

margin: 0px;

border-top: thin solid blue;

text-align: center;

}

No matter how I define the image div, it always pushes the main, navigation, and header divs out of alignment. If I just place the image in another div, it still makes things move.

Is there any way to have the page centered with 90% width and everything else in the wrapper div, and also have the image in the top-right corner? If it would require a different type of thing, can someone help me figure it out? Something that works only in one browser won't help, as I want it to work as seamlessly as possible for the most people.

网友答案:

You might be looking to use absolute positioning,

#image { position:absolute; top:0; left:0; }

However this will need to stay relative to your wrapper:

#wrapper { position:relative; }

Though I'm strictly guessing, provide more info and you'll get a more definitive solution.

网友答案:

Use z-index to put the image on a higher layer.

http://www.w3schools.com/Css/pr_pos_z-index.asp

This way nothing else gets moved.

网友答案:

If you don't want it to affect anything else on the page, can I just check that it's not a background image? If it's not, then have you tried making it a background image? That way it won't/can't affect the document flow and nothing will be moved because of it.

Though if you already have one background image it might complicate things a little.

分享给朋友:
您可能感兴趣的文章:
随机阅读: