-1
Мой код вида + карты Google интеграции перечисленных ниже:форма не отображается выше Google Maps фона
<html>
<head lang="en">
<meta charset="UTF-8">
<!-- Font awesome css file-->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" type="text/css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/clockpick.css">
<!-- Superslide css file-->
<!-- Google fonts -->
<style>
@media (min-width: 1200px) {
.container {
width: 500px;
height: 400px;
z-index: 1;
position: relative
}
}
#googlemaps {
height: 400px;
width: 500px;
position:absolute;
top: 0;
left: 0;
z-index: 0; /* Set z-index to 0 as it will be on a layer below the contact form */
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<![endif]-->
<title></title>
</head>
<body>
<br> <br> <br>
<div class="row">
<div id="googlemaps">
<div class="container">
<form class="form-horizontal" action='login.php' method="POST">
<br>
<fieldset>
<div id="legend">
<legend class="">Travel Detail</legend>
</div>
<div class="control-group">
<!-- Username -->
<label class="control-label" for="ploc">PickUp location</label>
<div class="controls">
<input type="text" id="ploc" name="ploc" placeholder="Enter PickUp location" class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- Password-->
<label class="control-label" for="dloc">Drop Off Location</label>
<div class="controls">
<input type="text" id="dloc" name="dloc" placeholder="Enter Drop Off Location" class="input-xlarge">
</div>
</div>
<label class="control-label" for="startDate">Date</label>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</span>
</div>
<label class="control-label" for="startDate">Time</label>
<div class="input-group clockpicker">
<input type="text" class="form-control" value="09:30">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
<br>
<br>
<button type="button" class="btn btn-primary btn-lg" id="next">Next</button>
</fieldset>
</form>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap- datepicker/1.3.0/js/bootstrap-datepicker.min.js" type="text/javascript"> </script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap- datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js" type="text/javascript"> </script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/lang/en-gb.js" type="text/javascript"></script>
<script type="text/javascript" src="js/clockpicker.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
$(document).ready(function() {
var position = [28.6139, 77.2090];
function showGoogleMaps() {
var latLng = new google.maps.LatLng(position[0], position[1]);
var mapOptions = {
zoom: 16, // initialize zoom level - the max value is 21
streetViewControl: false, // hide the yellow Street View pegman
scaleControl: true, // allow users to zoom the Google Map
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latLng
};
map = new google.maps.Map(document.getElementById('googlemaps'),
mapOptions);
// Show the default red marker at the location
marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: false,
animation: google.maps.Animation.DROP
});
}
google.maps.event.addDomListener(window, 'load', showGoogleMaps);
$('#startDate').datepicker();
$('.clockpicker').clockpicker();
});
</script>
</html>
Я даже изменил свойство z-index моего контейнера и идентификатор google maps в css. Но все же он не решает p Пожалуйста, помогите.
ли '.container' помещается абсолютным или относительным ?? В противном случае 'z-index' ничего не сделает. – LinkinTED
размещено относительно –
Итак, у вас возникла проблема с позиционированием элемента '.container', но весь ваш код присутствует, кроме той части, где вы пытаетесь ее позиционировать? – MrUpsidown