Why are objects (points) displayed above clusters in Yandex Map (being the contents of clusters)?

Question

JavaScript

Below is the code for templating labels and bubbles. I am also attaching a screenshot. The screen shows part of the clusters under the marks. On the labels themselves, the numbers are just a parameter, not the number inside the objects, I did not confuse them with a cluster.

$(function() {
ymaps.ready(init);

function init () {
  var viewObjectYMap = new ymaps.Map('object__map', {
    center: [54.735505,55.990655], 
    zoom: 12,
    controls: []
  });

  var Objects = incomeObjects;

  var myObjectItem = [],
      myCollection = new ymaps.GeoObjectCollection();
      clusterTemplate = ymaps.templateLayoutFactory.createClass('<div class="balloon__cluster">$[properties.geoObjects.length]</div>'),    
      pointTemplate = ymaps.templateLayoutFactory.createClass('<div class="balloon__cluster placemark">$[properties.caption]</div>'),    
      MyBalloonLayout = ymaps.templateLayoutFactory.createClass(
        '<div class="balloon__content">' +
        '<div class="balloon__content--close">x</div>' + 
        '$' +
        '</div>', {
        build: function () {
            this.constructor.superclass.build.call(this);
            this._$element = $('.balloon__content', this.getParentElement());
            this.applyElementOffset();
            this._$element.find('.balloon__content--close')
                .on('click', $.proxy(this.onCloseClick, this));
        },
        clear: function () {
            this._$element.find('.balloon__content--close')
                .off('click');
            this.constructor.superclass.clear.call(this);
        },
        onSublayoutSizeChange: function () {
            MyBalloonLayout.superclass.onSublayoutSizeChange.apply(this, arguments);

            if(!this._isElement(this._$element)) {
                return;
            }

            this.applyElementOffset();

            this.events.fire('shapechange');
        },
        applyElementOffset: function () {
            this._$element.css({
                left: -(this._$element[0].offsetWidth / 2),
                top: -(this._$element[0].offsetHeight / 2)
            });
        },
        onCloseClick: function (e) {
            e.preventDefault();

            this.events.fire('userclose');
        },
        getShape: function () {
            if(!this._isElement(this._$element)) {
                return MyBalloonLayout.superclass.getShape.call(this);
            }

            var position = this._$element.position();

            return new ymaps.shape.Rectangle(new ymaps.geometry.pixel.Rectangle([
                [position.left, position.top], [
                    position.left + this._$element[0].offsetWidth,
                    position.top + this._$element[0].offsetHeight
                ]
            ]));
        },
        _isElement: function (element) {
            return element && element[0];
        }
      }),
      MyBalloonContentLayout = ymaps.templateLayoutFactory.createClass(
        '<a href="$[properties.balloonLink]" class="balloon__body">' +
        '<figure class="objects__image--wrapper"><img class="objects__image" src="$[properties.balloonPic]" /></figure>' +
        '<table class="objects__item--params">' + 
        '<tr>' + 
        '<td class="objects__item--param-name">Комнаты</td>' +
        '<td class="objects__item--param-val">$[properties.balloonRooms]</td>' +
        '<td class="objects__item--param-unit"></td>' +
        '</tr>' +
        '<tr>' + 
        '<td class="objects__item--param-name">Площадь</td>' +
        '<td class="objects__item--param-val">$[properties.balloonSquare]</td>' +
        '<td class="objects__item--param-unit">м<sup>2</sup></td>' +
        '</tr>' +
        '<tr>' + 
        '<td class="objects__item--param-name">Стоимость</td>' +
        '<td class="objects__item--param-val">$[properties.balloonCost]</td>' +
        '<td class="objects__item--param-unit"><img src="/img/roub-meter.svg" /></td>' +
        '</tr>' +
        '<tr>' +
        '<td colspan="3" class="objects__item--descr">$[properties.balloonDesc]</td>' +
        '</tr>' + 
        '</table></a>'
      ),
      myClusterer = new ymaps.Clusterer({
        clusterBalloonPanelMaxMapArea: 0,
        clusterIcons: [{
          href: '/img/cluster.svg',
          size: [46, 55],
          offset: [-23, -55]
        }],
        clusterIconContentLayout: clusterTemplate
      });

  for(var i = 0, maxi = Objects.length; i < maxi; i++) {
    myObjectItem[i] = new ymaps.Placemark(Objects[i].coords, {
      balloonPic: Objects[i].pic,
      balloonRooms: Objects[i].rooms,
      balloonSquare: Objects[i].square,
      balloonCost: Objects[i].cost,
      balloonDesc: Objects[i].description,
      balloonLink: Objects[i].link,
      hintContent: "Актуальное предложение",
      caption: Objects[i].rooms,
    }, {
      balloonShadow: false,
      balloonLayout: MyBalloonLayout,
      balloonContentLayout: MyBalloonContentLayout,
      balloonPanelMaxMapArea: 0,
      iconLayout: pointTemplate,
      iconShape: {
        type: 'Circle',
        coordinates: [23, 25],
        radius: 23
      },
    });
  }

  myClusterer.add(myObjectItem);
  viewObjectYMap.geoObjects.add(myClusterer);
} });<blockquote></blockquote>

Answer 1

By setting the option "clusterIconContentLayout: clusterTemplate" you have replaced the cluster *content* layout (which by default is just a number). Now you have the content of the cluster - a label with a number.