CSS 如何在其他 div 之上创建一个独立的 div?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11467328/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 04:28:02  来源:igfitidea点击:

How to make an independent div over other divs?

css

提问by Aristona

I made a theme with a navigation menu at top like this;

我在顶部制作了一个带有导航菜单的主题,如下所示;

width="100%" height="100"

The left area contains customers logo at 100px height. However, they want logo to be bigger in side, say 200px. I don't want to increase the size of my div's size, instead, I want to make a new div at 200px-200px, put the logo inside it, and put that logo div over the navigation div.

左侧区域包含 100 像素高度的客户徽标。但是,他们希望徽标的侧面更大,例如 200 像素。我不想增加 div 的大小,相反,我想在 200px-200px 处创建一个新 div,将徽标放在其中,然后将该徽标 div 放在导航 div 上。

How can I make an independent div like this?

我怎样才能像这样制作一个独立的div?

采纳答案by PoeHaH

Is this what you mean? ofcourse the style should be done in separate css; not in the html!

你是这个意思吗?当然,样式应该在单独的 css 中完成;不在html中!

<div id="topnavigation" style = "height:100px;width:100px;position:relative;z-index:5;">
  <div id="logo" style="width:200px;height:200px; position:absolute;z-index:10; top:15px;left:15px;"> <img src ="logo.jpg" width="200px" height="200px"/> </div>
</div>

回答by Dpolehonski

Create the div inside the navigation div, but give it position:absolute; width:200px; height:200px; top:0; left:0;that should place it top left of the navigation without affecting the height of the navigation.

在导航 div 内创建 div,但position:absolute; width:200px; height:200px; top:0; left:0;应将其放置在导航的左上角,而不会影响导航的高度。

Alternative is it place the logo beforethe navigation element do use the same styles to position them both starting in the same page location.

另一种方法是在导航元素之前放置徽标使用相同的样式将它们定位在相同的页面位置。

Example:

例子:

#logo{
 position:absolute;
 top:0;
 left:0;
 width:200px;
 height:200px;
}


#navigation{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
}

<div id='logo'></div>
<div id='navigation'></div>

I'd recommend experimenting to find the best solution because I can't see your whole project.

我建议尝试找到最佳解决方案,因为我看不到您的整个项目。

Hope it helps.

希望能帮助到你。

回答by AdityaSaxena

Here is a sample jsfiddle for you: http://jsfiddle.net/ZzaZp/

这是一个示例 jsfiddle:http: //jsfiddle.net/ZzaZp/

and copying the code here:

并在此处复制代码:

HTML:

HTML:

<div class="navigation">
    <div class="logo">
        <img src="http://placekitten.com/200/200" />
    </div>
</div>

CSS:

CSS:

.navigation{
    height:100px;
    background-color:#f3f3f3;
    position:relative;
}

.logo img{
    width:200px;
    height:200px;
    border:0px;
    display:block;
}

.logo{
    position:absolute;
    width:200px;
    height:200px;
    border:2px solid #eee;
    left:20px;
    top:20px;
}

回答by Mohideen bin Mohammed

here is the CSS sample which worked for me...

这是对我有用的CSS示例...

.logo {
  position: absolute;
  top: 0; 
  left: 0; /* can adjust div position by changing left and top etc */
  width: 100px;
  height: 100px; /* width and height require to place it on top of certain size its an added advantage */
}