title: OpenLayers 3 - Z-index of features on highlights
body: <p>I have some troubles with z-index on OpenLayers 3 when i want to highlight a feature.</p>
  
  <p>I create a GeoJSON shape of a country, add some marker on top, and i want the shape color change when i hover on.</p>
  
  <p>But, when the color change, the shape hide my markers.</p>
  
  <p>I try to put zIndex style on the hightlight style but this doesn't change anything...</p>
  
  <pre><code>    var map = new ol.Map({
          layers: [
              new ol.layer.Tile({
                  source: new ol.source.OSM()
              })],
          controls: ol.control.defaults({
              attributionOptions: ({
                  collapsible: false
              })
          }),
          target: 'map',
          view: new ol.View({
              center: [631965.84, 4918890.2],
              zoom: 3
          })
      });
  
      var vector = new ol.layer.Vector({
          source: new ol.source.Vector({}),
          style: new ol.style.Style({
              zIndex: 1,
              stroke: new ol.style.Stroke({
                  color: '#589CA9',
                  width: 3
              }),
              fill: new ol.style.Fill({
                  color: '#589CA9'
              })
          })
      });
  
      map.addLayer(vector);
  
      var selectPointerMove = new ol.interaction.Select({
          condition: ol.events.condition.pointerMove,
          style: new ol.style.Style({
              stroke: new ol.style.Stroke({
                  color: '#EF7F01',
                  width: 3
  
              }),
              zIndex: 1,
              fill: new ol.style.Fill({
                  color: '#EF7F01'
              })
          })
      });
  
      map.addInteraction(selectPointerMove);
  
      var feature = new ol.format.GeoJSON().readFeature(Some_GeoJSON_Coordinate, {
          dataProjection: ol.proj.get('EPSG:4326'),
          featureProjection: ol.proj.get('EPSG:3857')
      });
  
      vector.getSource().addFeature(feature);
  
      iconFeature = new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.transform([5, 44],"EPSG:4326", 'EPSG:3857')),
          type:"marker"
      });
  
      var iconStyle = new ol.style.Style({
          zIndex:2,
          image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
              anchor:[0.5,1],
              scale:0.1,
              src: 'https://lh4.ggpht.com/Tr5sntMif9qOPrKV_UVl7K8A_V3xQDgA7Sw_qweLUFlg76d_vGFA7q1xIKZ6IcmeGqg=w300'
          }))
      });
  
      iconFeature.setStyle(iconStyle);
  
      vector.getSource().addFeature(iconFeature)
  </code></pre>
  
  <p>I create a JSFiddle of my issue : <a href="http://jsfiddle.net/a1zb5kzf/1/" rel="nofollow">http://jsfiddle.net/a1zb5kzf/1/</a></p>
  
  <p>Thanks you in advance for your help</p>