如何在所有其他div和所有其他div上显示一个div应该居中？ [英] How to show one div over all other and all other divs should be centered?

问题描述

我正在设计一个html page.link https://codepen.io/KARANVERMA5/pen/oqKJma 。

我需要将按钮和进度条全部对齐到中心并显示在文字云后面。

请指出我正确的方向，这里有什么不对，为什么栏不显示在词云下面。如何在顶部显示wordcloud以及在其下方的所有其他内容div居中？



我尝试过：

I am designing a html page.link https://codepen.io/KARANVERMA5/pen/oqKJma .
I need to have the button and progress bar all aligned to center and shows behind the word-cloud.
Please point me in right direction that what is wrong here, why the bar is not showing below the word-cloud. How can I show wordcloud at top and all other things divs below it centered?

What I have tried:

    #word-cloud  {
    position:fixed;
    height: 100vh;
    max-height: 100%;
    width: 100vw;
    max-width: 100;
    margin:-300px auto auto -250px;
    top:20%;
    left:70%;
    text-align:center;
    z-index:1;
}

body,
html {
    margin: 0;
    padding: 0;
}


.bar {
    position:relative;
    border: 1px solid #666;
    height: 5px;
    width: 100px;
    margin:-300px auto auto -250px;
    z-index: 2;
}

.bar .in {
    -webkit-animation: fill 10s linear 1;
    animation: fill 10s linear 1;
    height: 100%;
    background-color: red;
}

@-webkit-keyframes fill {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

推荐答案

我可以给你一些明确的指示 - 这是最好的你可以学习的方式。



1 - 看看CSS样式：z-index来控制图层。什么命令的价值？怎么样？

2 - 居中div等：margin：0 auto 0 auto;这就是诀窍。

它告诉浏览器没有上/下边距，自动左右边距。

3 - 如果你覆盖的东西，他们仍然真的需要一个容器。再一次，一种风格，

背景颜色：透明;



我主要使用< div>一切的元素。我甚至通过点击事件或链接以某种方式制作按钮。更灵活。如果你愿意，你可以删除链接文本下面的行。



你仍然需要玩这些 - 这是学习的部分。 />

I can give you some definite pointers - which is the best way for you to learn.

1 - look at CSS styles: z-index to control layers. What orders the values? How?
2 - centering div's and the like: margin: 0 auto 0 auto; is the trick for that.
It's telling the browser no top/bottom margins, automatic right and left margins.
3 - if you're overlaying things, they still really need a container. Again, a style,
background-color:transparent;

I work mainly with <div> elements for everything. I even make buttons that way, at times, with an on-click event or link. More flexability. You can get rid of the line under the link text if you wish.

You'll still need to play around with these - which is the learning part.

这篇关于如何在所有其他div和所有其他div上显示一个div应该居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！