title: css margin / element positioning issue in chrome - zoom settings
body: <p>I have had users report issues with elements not visible on a page when using chrome at 100% zoom setting. It looked like the <code>margin-top</code> property was not being applied. When the user zoomed in, 100 to 110%, the field was visible.</p>
  <p>I am using a Flask + Dash app and have a stylesheet.</p>
  <p>Layout: <a href="https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/" rel="nofollow noreferrer">https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/</a></p>
  <p>Sharing minimal code for simplicity:</p>
  <pre><code>import dash_bootstrap_components as dbc
  from dash import html
  
  layout = html.Div([
  
     dbc.Row(
         [
           dbc.Col(
  
              html.Div([
  
                  dcc.Graph(id=&quot;graph1&quot;)
  
                  
                  ]),
  
           width={&quot;size&quot;: 2, &quot;order&quot;: &quot;first&quot;},),
  
  
           # form
           dbc.Col([
  
              # Address autocomplete
              html.Div([
  
                  dbc.InputGroup(
                      [
  
                          dbc.InputGroupAddon(&quot;Address&quot;),
  
                          dcc.Input(id=&quot;address_autocomplete&quot;,
                                    required=True,
                                    style={&quot;width&quot;:&quot;72%&quot;}),
  
                      ],
                      style={&quot;margin-top&quot;:&quot;0px&quot;, &quot;width&quot;: &quot;53%&quot;, &quot;float&quot;: &quot;left&quot;},
                  ),
  
                  ....
                  ....
                  
                  html.Div([
  
                      dbc.Button(&quot;Find&quot;, id=&quot;c-button&quot;, size=&quot;lg&quot;, className=&quot;mr-1&quot;),
  
                  ], style={&quot;width&quot;:&quot;70%&quot;, &quot;margin-top&quot;: &quot;15%&quot;}),
  
  
              ], className=&quot;p-style&quot;,
                 style={&quot;width&quot;: &quot;75%&quot;, &quot;font-size&quot;:&quot;1.08em&quot;}),
  
          ], width={&quot;size&quot;: 10, &quot;order&quot;: &quot;last&quot;, &quot;offset&quot;: 8},),
      ]),
  
  
  ])
  </code></pre>
  <p>custom.css</p>
  <pre><code>.prop-style {
    padding: 2% 0px 0px 10px;
    margin-top: -77%;
    margin-left: -5em;
    position: relative;
  }
  </code></pre>
  <p>It appears fine for me, however, when testing with a user, this is how it looks.</p>
  <p><a href="https://i.stack.imgur.com/BKriam.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BKriam.png" alt="no-address" /></a></p>
  <p>Expected view:</p>
  <p><a href="https://i.stack.imgur.com/UNxSlm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UNxSlm.png" alt="w-address" /></a></p>