个人中心
gpt4 book ai didi

html - 布局中重叠元素的问题(css，html)

转载 作者：行者123 更新时间：2023-11-28 04:00:46 25 4
gpt4 key购买 nike

我的布局发生了一些奇怪的事情，我认为这些事情与 css 相关。

我有一个主 div、工具栏 div 和一个 dojo expandopane(开始时关闭)。主 div 的顶部与工具栏 div 重叠，直到扩展 Pane 展开一次。完成后，一切看起来都很好。最重要的是，scale_bar 没有集成到 toolContainer 中。

这是 html 正文:

<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>A Company | SIG WEB</title>

  <script>
  var dojoConfig = {
    parseOnLoad: false,
    async: true,
    packages: [
      {
        name: "agsjs",
        "location": '/SPE_SIG/agsjs' // for xdomain load
      }, {
        name: "js",
        "location": '/test/js'
      }]
    };
    </script>

    <link rel="stylesheet" href="http://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.17/esri/css/esri.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.18/dojox/layout/resources/ExpandoPane.css">
    <link rel="stylesheet" href="css/widget_styles.css">

    <script src="http://js.arcgis.com/3.17/"></script>


    <script src="js/Map.js"></script>

    <!--<script type="text/javascript">
    dojo.require("dojox.layout.ExpandoPane");
  </script>-->

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript">
  $(window).load(function() {
    $(".loader").fadeOut("slow");
  })
  </script>

</head>

<body class="claro">
  <div class="loader"></div>
  <div class = "contentclass" id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:true" style="width: 100%; height: 100%; margin: 0;">

    <div id="rightPane" data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props="region:'right',title:'Outils',startExpanded:false">

      <div data-dojo-type="dijit/layout/AccordionContainer">
        <!-- <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Légende', selected:true">
          <div id="legendDiv"></div>
        </div> -->
        <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Légende', selected:true">
          <div id="layerListDom"></div>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Impressions'">

          <select name="printLayout" id="printLayoutId" data-dojo-type="dijit/form/Select">
            <option value="A0_paysage">A0 Paysage</option>
            <option value="A0_portrait">A0 Portrait</option>
            <option value="A1_paysage">A1 Paysage</option>
            <option value="A1_portrait">A1 Portrait</option>
            <option value="A2_paysage">A2 Paysage</option>
            <option value="A2_portrait">A2 Portrait</option>
            <option value="A3_paysage">A3 Paysage</option>
            <option value="A3_portrait">A3 Portrait</option>
            <option value="A4_paysage" selected="selected">A4 Paysage</option>
            <option value="A4_portrait">A4 Portrait</option>
            <!-- <option value="Letter ANSI A Landscape" selected>Letter ANSI A Landscape</option>
            <option value="Letter ANSI A Portrait">Letter ANSI A Portrait</option>
            <option value="Tabloid ANSI B Landscape">Tabloid ANSI B Landscape</option>
            <option value="Tabloid ANSI B Portrait">Tabloid ANSI B Portrait</option> -->
          </select>
          <br>
          <select id="format" data-dojo-type="dijit/form/Select">
            <OPTION value="PDF">PDF</OPTION>
            <OPTION value="PNG32">PNG</OPTION>
          </select>
          <br>
          <br>
          <!-- <input type="checkbox" id="check_scales" checked
          data-dojo-type="dijit/form/CheckBox"
          data-dojo-props="checked: true"> -->
          <div id="scale_check"></div>
          <label for="scale_check">Imprimer à l'échelle</label>

          <div id="scale_select" class="comboClass"></div>

          <button id="print_button_bis" type="button"></button>
          <p id="print_status"></p>
          <a target="_blank" id="output_url" href="#"></a>
          <!--<input type="button" id="print" value = "Print" onclick="printMap();"/>-->


        </div>
        <div data-dojo-type="dijit/layout/ContentPane" id="identifyPane" data-dojo-props="title:'Identification'">
          <select id="id_select" data-dojo-type="dijit/form/Select">
            <OPTION value="Aucune identifiée">Entités identifiées</OPTION>
          </select>

        </div>


        <div data-dojo-type="dijit/layout/ContentPane" id="measurePane" data-dojo-props="title:'Mesure'">
          <!-- <div id="measure_check"></div>
          <label for="scale_check">Activer les outils de mensuration</label> -->

          <div id="measurementDiv"></div>
        </div>

      </div>
    </div>

    <div class="toolContainer">
      <div class="navBarClass" id="navToolbar" data-dojo-type="dijit/Toolbar" data-dojo-props="region:'top'" style="background-color:#ffffff;">
        <button type="button" id="zoomin"></button>
        <button type="button" id="zoomout"></button>
        <button type="button" id="zoomfullext"></button>
        <button type="button" id="zoomprev"></button>
        <button type="button" id="zoomnext"></button>
        <button type="button" id="pan"></button>
        <button type="button" id="id_button"></button>
        <!-- <button type="button" id="deactivate"></button> -->
      </div>
      <div class="scaleBarClass" id="scale_bar"></div>
    </div>

    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow: hidden;width: 100%; height: 100%; margin: 0;">


        <a href="http://www.google.com/"><img src="images/logo.jpg" alt="LOGO" id="logo"/></a>

        <a href="mailto:me@gmail.com" id="space">US 2017</a>


      <div id="search"></div>


    </div>
  </div>

</body>

</html>

这是我的CSS:

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  z-index:0;
  position: relative;
}
#search {
  display: block;
  position: absolute;
  z-index: 3;
  top: 20px;
  left: 75px;
}


#rightPane {
  width: 20%;
}

#logo {
  position: absolute;
  bottom:20px;
  left:20px;
  z-index:100;
  width:75px;
}

#logo-div{
 z-index:3;
}

#space {
  position: absolute;
  bottom:5px;
  left:20px;
  z-index:3;
  width:75px;
  font-size:9px;
}

#legendPane {
  border: solid #97DCF2 1px;
}


h3 {
  margin: 0 0 5px 0;
  border-bottom: 1px solid #444;
  padding: 0 0 5px 0;
  text-align: center;
}



.comboClass{
  width: 50px;
}

.zoominIcon {
  background-image: url(http://lorempixel.com/30/30);
  width: 30px;
  height: 30px;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: 5px 5px;
}

.zoomoutIcon {
  background-image: url(http://lorempixel.com/30/30);
  width: 30px;
  height: 30px;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: 5px 5px;
}

.zoomfullextIcon {
  background-image: url(http://lorempixel.com/30/30);
  width: 30px;
  height: 30px;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: 5px 5px;
}

.zoomprevIcon {
  background-image: url(http://lorempixel.com/30/30);
  width: 30px;
  height: 30px;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: 5px 5px;
}

.zoomnextIcon {
  background-image: url(http://lorempixel.com/30/30);
  width: 30px;
  height: 30px;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: 5px 5px;
}

.panIcon {
  background-image: url(http://lorempixel.com/30/30);
  width: 30px;
  height: 30px;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: 5px 5px;
}

.deactivateIcon {
  background-image: url(http://lorempixel.com/30/30);
  width: 30px;
  height: 30px;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: 5px 5px;
}

.identifyIcon {
  background-image: url(http://lorempixel.com/30/30);
  width: 30px;
  height: 30px;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: 5px 5px;
}


.contentclass {
  font-family: 'Fira Sans Extra Condensed', sans-serif;
}

.toolContainer {
  position: fixed;
  left: 0px;
  padding: 0;
  margin: 0;
}

.navBarClass {

  display: inline-block;
  float: left;
}

.scaleBarClass {

  display: inline-block;
  float: right;
  padding: 15px 115px;
}

我在面向公众的网址上有一个精简版的应用程序 here .这是页面加载的方式(注意 map 在工具栏上的小重叠): before expand

这是展开“expandopane”后的样子——元素符合预期: after expand

最佳答案 

.claro .dijitToolbar {
min-height:40px;}

应该解决这个问题:)

关于html - 布局中重叠元素的问题(css，html)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43220409/

25 4 0
文章推荐： c++ - WxWidgets 工具链解释
文章推荐： c++ - 从不同进程通过套接字 (UDP) 回复客户端
文章推荐： c++ - COM API - 无法为指针参数传递 "NULL"
文章推荐： C++/Eclipse undefined reference 问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com