Question

我有多个图像占据整个屏幕并自动调整大小（绝对定位和一些JavaScript）但是对于我的生活，我无法在div下放置内容。我将图像放在div容器中，div相对于其他容器定位。具有必要内容的div也是相对的。图像在相对div内是绝对的。有人可以看看我的代码，让我知道到底发生了什么？我无法弄清楚，经过我所做的所有研究，我不明白为什么它不起作用。谢谢！下面是外部样式表和HTML。我认为问题在div循环器（图像所在的）的实际HTML中，因为我在HTML div中嵌入了样式，并且内容至少落在顶部{{ 1}} s（在样式表中定义）。

＆＃13;

div

＆＃13;

@charset "utf-8";
/* CSS Document */

#mainbody
 { margin:0px; padding: 0px; border: 0px; overflow: scroll;}

#topnav.mainnav {
    background-color: rgb(27, 89, 127);
    height: 45px;
    width: 100%;
    max-width: 3000px;
    max-height: 45px;
    border: 0;
    margin: 0 auto;
    margin-top: -45px;
    padding: 0;
    text-align: center;
    /*box-shadow: 2px 2px 3px 2px #333;*/
        display: table; position: fixed;z-index: 4;
    }

#linktable.listlink { height: inherit; width: 50%; margin: 0 auto; position: relative; display: table; text-align: center;}

ul {list-style-type: none; margin: 0 auto; padding: 0; overflow: hidden; background-color: rgb(27, 89, 127); height: 45px; width: 760px;}

li {float: left;}

li a.other { display: block; padding-top: 10px; padding-left: 14px; padding-right: 14px; margin: 0; border: 0;
 height: 45px; color: #FFF; text-decoration: none; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-weight: 500;
}

li a:hover { background-color: rgb(131, 139, 146);  -o-transition:.3s;
  -ms-transition:.3s;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  /* ...and now for the proper property */
  transition:.3s }

li a.current { background-color: rgb(238, 237, 240); color: rgb(27, 89, 127);  padding-top: 10px; padding-left: 14px; padding-right:14px; margin: 0; border: 0; display: block;  text-decoration: none;
 height: 45px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-weight: 500;}

#namebar.topname {
    background-color: rgb(238, 237, 240);
    height: 123px;
    min-width: 760px;
    width: 100%;
    max-height: 123px;
    display: block;
    position: relative;
    border-bottom: 2px solid rgb(131, 139, 146);
    margin-top: 45px;
    text-align: center;
    padding-top: 0px;
}

img.dfrelogo { margin-top: 0px; width: 359px; height: 123px}

img.firstimagehome {width: 100%; max-width: 5472px;min-width:760px; height: auto; box-shadow: 4px 4px 4px #333333; text-align: center;}

#homefirstimage {margin-top: 0px; text-align: center;}

Answer 1

你需要这个吗，'#cycler img {position：absolute}'。

如果删除循环器div中'img'标签的绝对位置，文本将根据需要显示。

#cycler img{z-index:1;width: 100%; max-width: 5472px;min-width: 359px; height: auto;; text-align: center;box-shadow: 3px 2px 6px  #333333; float:left}

这样做。

要了解绝对位置，这是一个很好的简答。

位置：绝对;

这告诉浏览器应该从文档的正常流程中删除要定位的内容，并将其放置在页面上的确切位置。它不会影响HTML之前或之后的元素如何定位在网页上，但除非你覆盖它，否则它将受父母的定位影响。

CSS定位让我疯狂

1 个答案: